
<!doctype html>
<html lang="en" class="no-js">
  <head>
    
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      
      
      
      
        <link rel="prev" href="../Java/05_%E6%9C%8D%E5%8A%A1%E7%AB%AF%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA/index.html">
      
      
        <link rel="next" href="../02_CSS%E5%9F%BA%E7%A1%80/index.html">
      
      
      <link rel="icon" href="../assets/images/favicon.png">
      <meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.6.5">
    
    
      
        <title>2 Html基础实验 - 基于WEB的应用程序开发-实验指导书</title>
      
    
    
      <link rel="stylesheet" href="../assets/stylesheets/main.8608ea7d.min.css">
      
        
        <link rel="stylesheet" href="../assets/stylesheets/palette.06af60db.min.css">
      
      


    
    
      
    
    
      
        
        
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
        <style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
      
    
    
      <link rel="stylesheet" href="../assets/stylesheets/extra.css">
    
    <script>__md_scope=new URL("..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
    
      

    
    
    
  </head>
  
  
    
    
      
    
    
    
    
    <body dir="ltr" data-md-color-scheme="default" data-md-color-primary="purple" data-md-color-accent="indigo">
  
    
    <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
    <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
    <label class="md-overlay" for="__drawer"></label>
    <div data-md-component="skip">
      
        
        <a href="#html" class="md-skip">
          Skip to content
        </a>
      
    </div>
    <div data-md-component="announce">
      
    </div>
    
    
      

  

<header class="md-header md-header--shadow" data-md-component="header">
  <nav class="md-header__inner md-grid" aria-label="Header">
    <a href="../index.html" title="基于WEB的应用程序开发-实验指导书" class="md-header__button md-logo" aria-label="基于WEB的应用程序开发-实验指导书" data-md-component="logo">
      
  
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg>

    </a>
    <label class="md-header__button md-icon" for="__drawer">
      
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
    </label>
    <div class="md-header__title" data-md-component="header-title">
      <div class="md-header__ellipsis">
        <div class="md-header__topic">
          <span class="md-ellipsis">
            基于WEB的应用程序开发-实验指导书
          </span>
        </div>
        <div class="md-header__topic" data-md-component="header-topic">
          <span class="md-ellipsis">
            
              2 Html基础实验
            
          </span>
        </div>
      </div>
    </div>
    
      
        <form class="md-header__option" data-md-component="palette">
  
    
    
    
    <input class="md-option" data-md-color-media="" data-md-color-scheme="default" data-md-color-primary="purple" data-md-color-accent="indigo"  aria-label="夜间模式"  type="radio" name="__palette" id="__palette_0">
    
      <label class="md-header__button md-icon" title="夜间模式" for="__palette_1" hidden>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0-7 2.39 3.42C13.65 5.15 12.84 5 12 5s-1.65.15-2.39.42zM3.34 7l4.16-.35A7.2 7.2 0 0 0 5.94 8.5c-.44.74-.69 1.5-.83 2.29zm.02 10 1.76-3.77a7.131 7.131 0 0 0 2.38 4.14zM20.65 7l-1.77 3.79a7.02 7.02 0 0 0-2.38-4.15zm-.01 10-4.14.36c.59-.51 1.12-1.14 1.54-1.86.42-.73.69-1.5.83-2.29zM12 22l-2.41-3.44c.74.27 1.55.44 2.41.44.82 0 1.63-.17 2.37-.44z"/></svg>
      </label>
    
  
    
    
    
    <input class="md-option" data-md-color-media="" data-md-color-scheme="slate" data-md-color-primary="teal" data-md-color-accent="indigo"  aria-label="日间模式"  type="radio" name="__palette" id="__palette_1">
    
      <label class="md-header__button md-icon" title="日间模式" for="__palette_0" hidden>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m17.75 4.09-2.53 1.94.91 3.06-2.63-1.81-2.63 1.81.91-3.06-2.53-1.94L12.44 4l1.06-3 1.06 3zm3.5 6.91-1.64 1.25.59 1.98-1.7-1.17-1.7 1.17.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95zm-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14.4-.4.82-.76 1.27-1.08.75-.53 1.93.36 1.85 1.19-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82-2.81 3.14-2.7 7.96.31 10.98 3.02 3.01 7.84 3.12 10.98.31"/></svg>
      </label>
    
  
</form>
      
    
    
      <script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
    
    
    
    
  </nav>
  
</header>
    
    <div class="md-container" data-md-component="container">
      
      
        
          
        
      
      <main class="md-main" data-md-component="main">
        <div class="md-main__inner md-grid">
          
            
              
              <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    



<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
  <label class="md-nav__title" for="__drawer">
    <a href="../index.html" title="基于WEB的应用程序开发-实验指导书" class="md-nav__button md-logo" aria-label="基于WEB的应用程序开发-实验指导书" data-md-component="logo">
      
  
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg>

    </a>
    基于WEB的应用程序开发-实验指导书
  </label>
  
  <ul class="md-nav__list" data-md-scrollfix>
    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    首页
    
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    
    
    
      
        
        
      
    
    
    <li class="md-nav__item md-nav__item--section md-nav__item--nested">
      
        
        
          
        
        <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2" >
        
          
          <label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="">
            
  
  <span class="md-ellipsis">
    1. 实验环境搭建
    
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_2">
            <span class="md-nav__icon md-icon"></span>
            1. 实验环境搭建
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../00_%E7%8E%AF%E5%A2%83%E5%BB%BA%E7%AB%8B/Java/index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    1.1 前端环境搭建
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../Java/05_%E6%9C%8D%E5%8A%A1%E7%AB%AF%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA/index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    1.2 后端境搭建
    
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
    
  
  
  
    <li class="md-nav__item md-nav__item--active">
      
      <input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
      
      
        
      
      
        <label class="md-nav__link md-nav__link--active" for="__toc">
          
  
  <span class="md-ellipsis">
    2 Html基础实验
    
  </span>
  

          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <a href="index.html" class="md-nav__link md-nav__link--active">
        
  
  <span class="md-ellipsis">
    2 Html基础实验
    
  </span>
  

      </a>
      
        

  

<nav class="md-nav md-nav--secondary" aria-label=" ">
  
  
  
    
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
       
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#1" class="md-nav__link">
    <span class="md-ellipsis">
      1 实验类型
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#2" class="md-nav__link">
    <span class="md-ellipsis">
      2 实验目的
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#3" class="md-nav__link">
    <span class="md-ellipsis">
      3 实验要求
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#4" class="md-nav__link">
    <span class="md-ellipsis">
      4 实验环境
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#5" class="md-nav__link">
    <span class="md-ellipsis">
      5 实验步骤
    </span>
  </a>
  
    <nav class="md-nav" aria-label="5 实验步骤">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_1" class="md-nav__link">
    <span class="md-ellipsis">
      基本调试流程
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_2" class="md-nav__link">
    <span class="md-ellipsis">
      常见标签
    </span>
  </a>
  
    <nav class="md-nav" aria-label="常见标签">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#htmlbody" class="md-nav__link">
    <span class="md-ellipsis">
      html的主体标签&lt;body&gt;
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_3" class="md-nav__link">
    <span class="md-ellipsis">
      颜色的设定
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#br" class="md-nav__link">
    <span class="md-ellipsis">
      换行标签&lt;br&gt;
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#p" class="md-nav__link">
    <span class="md-ellipsis">
      段落标签&lt;p&gt;及属性
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#pre" class="md-nav__link">
    <span class="md-ellipsis">
      原样显示文字标签&lt;pre&gt;
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#center" class="md-nav__link">
    <span class="md-ellipsis">
      居中对齐标签&lt;center&gt;
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#hn" class="md-nav__link">
    <span class="md-ellipsis">
      标题文字标签&lt;hn&gt;
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#a" class="md-nav__link">
    <span class="md-ellipsis">
      超链接&lt;a&gt;
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#img" class="md-nav__link">
    <span class="md-ellipsis">
      图片&lt;img&gt;
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#marquee" class="md-nav__link">
    <span class="md-ellipsis">
      滚动&lt;marquee&gt;
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#iframe" class="md-nav__link">
    <span class="md-ellipsis">
      浮动窗口&lt;iframe&gt;
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_4" class="md-nav__link">
    <span class="md-ellipsis">
      综合
    </span>
  </a>
  
    <nav class="md-nav" aria-label="综合">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_5" class="md-nav__link">
    <span class="md-ellipsis">
      表单与表格
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_6" class="md-nav__link">
    <span class="md-ellipsis">
      拓展练习
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
    </ul>
  
</nav>
      
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../02_CSS%E5%9F%BA%E7%A1%80/index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    3 CSS基础实验
    
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../03_Javascript%E5%9F%BA%E7%A1%80/index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    04 Javascript基础
    
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../03_Javascript%E9%AB%98%E7%BA%A7%E5%AE%9E%E9%AA%8C/index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    05 Javascript高级实验
    
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../04_jQuery/index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    06 jQuery
    
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../04_Bootstrap/index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    06 Bootstrap
    
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../04_Vue.js%E5%9F%BA%E7%A1%80/index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    06 Vue.js
    
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../Java/05_JSP%E7%9A%84%E9%9A%90%E5%90%AB%E5%AF%B9%E8%B1%A1%E5%AE%9E%E9%AA%8C/index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    05 JSP的隐含对象实验
    
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../Java/06_Servlet%E5%8F%8AFilter%E5%9F%BA%E7%A1%80%E5%AE%9E%E9%AA%8C/index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    06 Servlet及Filter基础实验
    
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../Java/07_SpringBoot%E7%BB%BC%E5%90%88%E5%AE%9E%E9%AA%8C/index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    07 Spring Boot综合实验
    
  </span>
  

      </a>
    </li>
  

    
  </ul>
</nav>
                  </div>
                </div>
              </div>
            
            
              
              <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    

  

<nav class="md-nav md-nav--secondary" aria-label=" ">
  
  
  
    
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
       
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#1" class="md-nav__link">
    <span class="md-ellipsis">
      1 实验类型
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#2" class="md-nav__link">
    <span class="md-ellipsis">
      2 实验目的
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#3" class="md-nav__link">
    <span class="md-ellipsis">
      3 实验要求
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#4" class="md-nav__link">
    <span class="md-ellipsis">
      4 实验环境
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#5" class="md-nav__link">
    <span class="md-ellipsis">
      5 实验步骤
    </span>
  </a>
  
    <nav class="md-nav" aria-label="5 实验步骤">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_1" class="md-nav__link">
    <span class="md-ellipsis">
      基本调试流程
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_2" class="md-nav__link">
    <span class="md-ellipsis">
      常见标签
    </span>
  </a>
  
    <nav class="md-nav" aria-label="常见标签">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#htmlbody" class="md-nav__link">
    <span class="md-ellipsis">
      html的主体标签&lt;body&gt;
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_3" class="md-nav__link">
    <span class="md-ellipsis">
      颜色的设定
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#br" class="md-nav__link">
    <span class="md-ellipsis">
      换行标签&lt;br&gt;
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#p" class="md-nav__link">
    <span class="md-ellipsis">
      段落标签&lt;p&gt;及属性
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#pre" class="md-nav__link">
    <span class="md-ellipsis">
      原样显示文字标签&lt;pre&gt;
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#center" class="md-nav__link">
    <span class="md-ellipsis">
      居中对齐标签&lt;center&gt;
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#hn" class="md-nav__link">
    <span class="md-ellipsis">
      标题文字标签&lt;hn&gt;
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#a" class="md-nav__link">
    <span class="md-ellipsis">
      超链接&lt;a&gt;
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#img" class="md-nav__link">
    <span class="md-ellipsis">
      图片&lt;img&gt;
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#marquee" class="md-nav__link">
    <span class="md-ellipsis">
      滚动&lt;marquee&gt;
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#iframe" class="md-nav__link">
    <span class="md-ellipsis">
      浮动窗口&lt;iframe&gt;
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_4" class="md-nav__link">
    <span class="md-ellipsis">
      综合
    </span>
  </a>
  
    <nav class="md-nav" aria-label="综合">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_5" class="md-nav__link">
    <span class="md-ellipsis">
      表单与表格
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_6" class="md-nav__link">
    <span class="md-ellipsis">
      拓展练习
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
    </ul>
  
</nav>
                  </div>
                </div>
              </div>
            
          
          
            <div class="md-content" data-md-component="content">
              <article class="md-content__inner md-typeset">
                
                  



<h1 id="html">Html基础实验</h1>
<h2 id="1">1 实验类型</h2>
<p>验证型，2学时，必选实验</p>
<h2 id="2">2 实验目的</h2>
<p>掌握Html页面调试流程；学习HTML语法和常见标记；掌握如何使用HTML创建网页结构</p>
<h2 id="3">3 实验要求</h2>
<p>验证参考代码；修改参考代码，实现自己的设计；将关键结果截图及源代码整理成实验报告</p>
<h2 id="4">4 实验环境</h2>
<p>Windows7+、浏览器（推荐<code>Microsoft Edge/Chrome/Firefox</code>等）、Visual Studio Code(VS Code)</p>
<h2 id="5">5 实验步骤</h2>
<p>创建工作目录：<code>盘符:/{学号}/exp2</code></p>
<h3 id="_1">基本调试流程</h3>
<p>创建一个Html文件并在浏览器中测试，步骤如下：</p>
<ol>
<li>
<p>使用<strong>VS Code</strong>打开工作目录</p>
</li>
<li>
<p>创建源代码文件<code>{工作目录}\HelloTest\Hello.html</code></p>
</li>
<li>
<p>编写HTML代码，参考代码如下：
    <div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">Hello.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-0-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-0-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-0-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-0-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-0-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-0-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-0-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-0-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-0-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-0-10">10</a></span>
<span class="normal"><a href="#__codelineno-0-11">11</a></span>
<span class="normal"><a href="#__codelineno-0-12">12</a></span>
<span class="normal"><a href="#__codelineno-0-13">13</a></span>
<span class="normal"><a href="#__codelineno-0-14">14</a></span>
<span class="normal"><a href="#__codelineno-0-15">15</a></span>
<span class="normal"><a href="#__codelineno-0-16">16</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-0-1" name="__codelineno-0-1"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span><span class="cm">&lt;!-- 开始标签 --&gt;</span>
<a id="__codelineno-0-2" name="__codelineno-0-2"></a>
<a id="__codelineno-0-3" name="__codelineno-0-3"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-0-4" name="__codelineno-0-4"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span> 一个简单的html示例 <span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span> <span class="cm">&lt;!-- 头部标签 --&gt;</span>
<a id="__codelineno-0-5" name="__codelineno-0-5"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-0-6" name="__codelineno-0-6"></a>
<a id="__codelineno-0-7" name="__codelineno-0-7"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span><span class="cm">&lt;!--主体文件开始 --&gt;</span>
<a id="__codelineno-0-8" name="__codelineno-0-8"></a>  <span class="p">&lt;</span><span class="nt">center</span><span class="p">&gt;</span><span class="cm">&lt;!--使页面居中显示 --&gt;</span>
<a id="__codelineno-0-9" name="__codelineno-0-9"></a>    <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>欢迎光临我的主页<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
<a id="__codelineno-0-10" name="__codelineno-0-10"></a>    <span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>
<a id="__codelineno-0-11" name="__codelineno-0-11"></a>    <span class="p">&lt;</span><span class="nt">hr</span><span class="p">&gt;</span>
<a id="__codelineno-0-12" name="__codelineno-0-12"></a>    <span class="p">&lt;</span><span class="nt">font</span> <span class="na">size</span><span class="o">=</span><span class="s">&quot;7&quot;</span> <span class="na">color</span><span class="o">=</span><span class="s">&quot;red&quot;</span><span class="p">&gt;</span>这是我第一次做主<span class="p">&lt;/</span><span class="nt">font</span><span class="p">&gt;</span>
<a id="__codelineno-0-13" name="__codelineno-0-13"></a>  <span class="p">&lt;/</span><span class="nt">center</span><span class="p">&gt;</span>
<a id="__codelineno-0-14" name="__codelineno-0-14"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span><span class="cm">&lt;!--主体文件结束--&gt;</span>
<a id="__codelineno-0-15" name="__codelineno-0-15"></a>
<a id="__codelineno-0-16" name="__codelineno-0-16"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span><span class="cp">&lt;!--结尾标签 - -&gt;</span>
</code></pre></div></td></tr></table></div></p>
</li>
<li>
<p>在<strong>浏览器</strong>中打开<code>Hello.html</code>并观察页面效果</p>
</li>
<li>
<p>在浏览器中打开(快捷键F12)<strong>开发者工具</strong>在各选项卡中观察<code>Hello.html</code>的不同方面并熟悉各项功能</p>
</li>
</ol>
<blockquote>
<p>注：最常用的几个选项卡有：<strong>Elements</strong>，<strong>Source</strong>，<strong>Network</strong>等</p>
</blockquote>
<h3 id="_2">常见标签</h3>
<p>练习Html中常见标签的使用方法，步骤如下：</p>
<blockquote>
<p>以<code>Hello.html</code>为模板练习调试以下标签，每个练习保存一个单独的文件</p>
</blockquote>
<h4 id="htmlbody">html的主体标签<code>&lt;body&gt;</code></h4>
<p>在<code>&lt;body&gt;</code>中放置的是页面中所有的内容，如图片、文字、表格、表单、超链接等设置</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">html_body.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-1-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-1-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-1-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-1-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-1-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-1-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-1-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-1-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-1-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-1-10">10</a></span>
<span class="normal"><a href="#__codelineno-1-11">11</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-1-1" name="__codelineno-1-1"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<a id="__codelineno-1-2" name="__codelineno-1-2"></a>
<a id="__codelineno-1-3" name="__codelineno-1-3"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-1-4" name="__codelineno-1-4"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Body标签<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<a id="__codelineno-1-5" name="__codelineno-1-5"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-1-6" name="__codelineno-1-6"></a>
<a id="__codelineno-1-7" name="__codelineno-1-7"></a><span class="p">&lt;</span><span class="nt">body</span> <span class="na">text</span><span class="o">=</span><span class="s">&quot;#000000&quot;</span> <span class="na">link</span><span class="o">=</span><span class="s">&quot;#000000&quot;</span> <span class="na">alink</span><span class="o">=</span><span class="s">&quot;#000000&quot;</span> <span class="na">vlink</span><span class="o">=</span><span class="s">&quot;#000000&quot;</span> <span class="na">background</span><span class="o">=</span><span class="s">&quot;gifnam.gif&quot;</span> <span class="na">bgcolor</span><span class="o">=</span><span class="s">&quot;#000000&quot;</span>
<a id="__codelineno-1-8" name="__codelineno-1-8"></a>  <span class="na">leftmargin</span><span class="o">=</span><span class="s">3</span> <span class="na">topmargin</span><span class="o">=</span><span class="s">2</span> <span class="na">bgproperties</span><span class="o">=</span><span class="s">&quot;fixed&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-1-9" name="__codelineno-1-9"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-1-10" name="__codelineno-1-10"></a>
<a id="__codelineno-1-11" name="__codelineno-1-11"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<h4 id="_3">颜色的设定</h4>
<p>颜色值是一个关键字或一个RGB格式的数字。应用时常在每个 RGB 值之前加上“ # “ 符号，如：bgcolor="#336699" 用英文名字表示颜色时直接写名字。如 bgcolor=green 
，RGB颜色可以有四种表达形式:：</p>
<ul>
<li><code>#rrggbb</code> (如，<code>#00cc00</code>) </li>
<li><code>#rgb</code> (如，<code>#0c0</code>) </li>
<li>rgb(x,x,x) x是一个介乎0到255之间的整数 (如，rgb(0,204,0)) </li>
<li>rgb(y%,y%,y%) y是一个介乎0.0到100.0之间的整数 (如， rgb(0%,80%,0%)</li>
</ul>
<h4 id="br">换行标签<code>&lt;br&gt;</code></h4>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">html_br.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-2-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-2-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-2-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-2-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-2-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-2-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-2-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-2-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-2-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-2-10">10</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-2-1" name="__codelineno-2-1"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<a id="__codelineno-2-2" name="__codelineno-2-2"></a>
<a id="__codelineno-2-3" name="__codelineno-2-3"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-2-4" name="__codelineno-2-4"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>无换行示例<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<a id="__codelineno-2-5" name="__codelineno-2-5"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-2-6" name="__codelineno-2-6"></a>
<a id="__codelineno-2-7" name="__codelineno-2-7"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-2-8" name="__codelineno-2-8"></a>  无换行标记：登鹳雀楼　白日依山尽，黄河入海流。欲穷千里目，更上一层楼。
<a id="__codelineno-2-9" name="__codelineno-2-9"></a>  <span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>有换行标记：<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>登鹳雀楼<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>白日依山尽，<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>黄河入海流。<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>欲穷千里目，<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>更上一层楼。
<a id="__codelineno-2-10" name="__codelineno-2-10"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<h4 id="p">段落标签<code>&lt;p&gt;</code>及属性</h4>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">html_p.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-3-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-3-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-3-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-3-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-3-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-3-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-3-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-3-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-3-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-3-10">10</a></span>
<span class="normal"><a href="#__codelineno-3-11">11</a></span>
<span class="normal"><a href="#__codelineno-3-12">12</a></span>
<span class="normal"><a href="#__codelineno-3-13">13</a></span>
<span class="normal"><a href="#__codelineno-3-14">14</a></span>
<span class="normal"><a href="#__codelineno-3-15">15</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-3-1" name="__codelineno-3-1"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<a id="__codelineno-3-2" name="__codelineno-3-2"></a>
<a id="__codelineno-3-3" name="__codelineno-3-3"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-3-4" name="__codelineno-3-4"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>测试分段控制标签<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<a id="__codelineno-3-5" name="__codelineno-3-5"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-3-6" name="__codelineno-3-6"></a>
<a id="__codelineno-3-7" name="__codelineno-3-7"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-3-8" name="__codelineno-3-8"></a>  <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>花儿什么也没有。它们只有凋谢在风中的轻微、凄楚而又无奈的吟怨，
<a id="__codelineno-3-9" name="__codelineno-3-9"></a>    就像那受到了致命伤害的秋雁，悲哀无助地发出一声声垂死的鸣叫。<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-3-10" name="__codelineno-3-10"></a>  <span class="p">&lt;</span><span class="nt">p</span> <span class="na">align</span><span class="o">=</span><span class="s">&quot;right&quot;</span><span class="p">&gt;</span>或许，这便是花儿那短暂一生最凄凉、最伤感的归宿。<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-3-11" name="__codelineno-3-11"></a>  <span class="p">&lt;</span><span class="nt">p</span> <span class="na">align</span><span class="o">=</span><span class="s">center</span><span class="p">&gt;</span>而美丽苦短的花期<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-3-12" name="__codelineno-3-12"></a>  <span class="p">&lt;</span><span class="nt">p</span> <span class="na">align</span><span class="o">=</span><span class="s">&quot;left&quot;</span><span class="p">&gt;</span>却是那最后悲伤的秋风挽歌中的瞬间插曲。<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-3-13" name="__codelineno-3-13"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-3-14" name="__codelineno-3-14"></a>
<a id="__codelineno-3-15" name="__codelineno-3-15"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<h4 id="pre">原样显示文字标签<code>&lt;pre&gt;</code></h4>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">html_pre.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-4-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-4-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-4-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-4-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-4-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-4-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-4-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-4-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-4-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-4-10">10</a></span>
<span class="normal"><a href="#__codelineno-4-11">11</a></span>
<span class="normal"><a href="#__codelineno-4-12">12</a></span>
<span class="normal"><a href="#__codelineno-4-13">13</a></span>
<span class="normal"><a href="#__codelineno-4-14">14</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-4-1" name="__codelineno-4-1"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<a id="__codelineno-4-2" name="__codelineno-4-2"></a>
<a id="__codelineno-4-3" name="__codelineno-4-3"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-4-4" name="__codelineno-4-4"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>原样显示文字标签<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<a id="__codelineno-4-5" name="__codelineno-4-5"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-4-6" name="__codelineno-4-6"></a>
<a id="__codelineno-4-7" name="__codelineno-4-7"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-4-8" name="__codelineno-4-8"></a>  <span class="p">&lt;</span><span class="nt">pre</span><span class="p">&gt;</span>
<a id="__codelineno-4-9" name="__codelineno-4-9"></a>  白日依山尽，黄河入海流。
<a id="__codelineno-4-10" name="__codelineno-4-10"></a>  欲穷千里目，更上一层楼。
<a id="__codelineno-4-11" name="__codelineno-4-11"></a>  <span class="p">&lt;/</span><span class="nt">pre</span><span class="p">&gt;</span>
<a id="__codelineno-4-12" name="__codelineno-4-12"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-4-13" name="__codelineno-4-13"></a>
<a id="__codelineno-4-14" name="__codelineno-4-14"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<h4 id="center">居中对齐标签<code>&lt;center&gt;</code></h4>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">html_center.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-5-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-5-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-5-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-5-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-5-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-5-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-5-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-5-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-5-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-5-10">10</a></span>
<span class="normal"><a href="#__codelineno-5-11">11</a></span>
<span class="normal"><a href="#__codelineno-5-12">12</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-5-1" name="__codelineno-5-1"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<a id="__codelineno-5-2" name="__codelineno-5-2"></a>
<a id="__codelineno-5-3" name="__codelineno-5-3"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-5-4" name="__codelineno-5-4"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>居中对齐标签<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<a id="__codelineno-5-5" name="__codelineno-5-5"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-5-6" name="__codelineno-5-6"></a>
<a id="__codelineno-5-7" name="__codelineno-5-7"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-5-8" name="__codelineno-5-8"></a>  <span class="p">&lt;</span><span class="nt">center</span><span class="p">&gt;</span>《送孟浩然之廣陵》<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>故人西辭黃鶴樓，煙花三月下揚州。
<a id="__codelineno-5-9" name="__codelineno-5-9"></a>      孤帆遠影碧山盡，惟見長江天際流。<span class="p">&lt;/</span><span class="nt">center</span><span class="p">&gt;</span>
<a id="__codelineno-5-10" name="__codelineno-5-10"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-5-11" name="__codelineno-5-11"></a>
<a id="__codelineno-5-12" name="__codelineno-5-12"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<h4 id="hn">标题文字标签<code>&lt;hn&gt;</code></h4>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">html_hn.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-6-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-6-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-6-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-6-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-6-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-6-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-6-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-6-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-6-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-6-10">10</a></span>
<span class="normal"><a href="#__codelineno-6-11">11</a></span>
<span class="normal"><a href="#__codelineno-6-12">12</a></span>
<span class="normal"><a href="#__codelineno-6-13">13</a></span>
<span class="normal"><a href="#__codelineno-6-14">14</a></span>
<span class="normal"><a href="#__codelineno-6-15">15</a></span>
<span class="normal"><a href="#__codelineno-6-16">16</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-6-1" name="__codelineno-6-1"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<a id="__codelineno-6-2" name="__codelineno-6-2"></a>
<a id="__codelineno-6-3" name="__codelineno-6-3"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-6-4" name="__codelineno-6-4"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>设定各级标题<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<a id="__codelineno-6-5" name="__codelineno-6-5"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-6-6" name="__codelineno-6-6"></a>
<a id="__codelineno-6-7" name="__codelineno-6-7"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-6-8" name="__codelineno-6-8"></a>  <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">align</span><span class="o">=</span><span class="s">&quot;center&quot;</span><span class="p">&gt;</span>一级标题。<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
<a id="__codelineno-6-9" name="__codelineno-6-9"></a>  <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>二级标题。<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<a id="__codelineno-6-10" name="__codelineno-6-10"></a>  <span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;</span>三级标题。<span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span>
<a id="__codelineno-6-11" name="__codelineno-6-11"></a>  <span class="p">&lt;</span><span class="nt">h4</span><span class="p">&gt;</span>四级标题。<span class="p">&lt;/</span><span class="nt">h4</span><span class="p">&gt;</span>
<a id="__codelineno-6-12" name="__codelineno-6-12"></a>  <span class="p">&lt;</span><span class="nt">h5</span> <span class="na">align</span><span class="o">=</span><span class="s">&quot;right&quot;</span><span class="p">&gt;</span>五级标题。<span class="p">&lt;/</span><span class="nt">h5</span><span class="p">&gt;</span>
<a id="__codelineno-6-13" name="__codelineno-6-13"></a>  <span class="p">&lt;</span><span class="nt">h6</span> <span class="na">align</span><span class="o">=</span><span class="s">&quot;left&quot;</span><span class="p">&gt;</span>六级标题。<span class="p">&lt;/</span><span class="nt">h6</span><span class="p">&gt;</span>
<a id="__codelineno-6-14" name="__codelineno-6-14"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-6-15" name="__codelineno-6-15"></a>
<a id="__codelineno-6-16" name="__codelineno-6-16"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<h4 id="a">超链接<code>&lt;a&gt;</code></h4>
<ol>
<li>
<p>书签链接</p>
<p>相同页面链接：<strong>html_a_a.html</strong></p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">html_a_a.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-7-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-7-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-7-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-7-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-7-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-7-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-7-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-7-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-7-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-7-10">10</a></span>
<span class="normal"><a href="#__codelineno-7-11">11</a></span>
<span class="normal"><a href="#__codelineno-7-12">12</a></span>
<span class="normal"><a href="#__codelineno-7-13">13</a></span>
<span class="normal"><a href="#__codelineno-7-14">14</a></span>
<span class="normal"><a href="#__codelineno-7-15">15</a></span>
<span class="normal"><a href="#__codelineno-7-16">16</a></span>
<span class="normal"><a href="#__codelineno-7-17">17</a></span>
<span class="normal"><a href="#__codelineno-7-18">18</a></span>
<span class="normal"><a href="#__codelineno-7-19">19</a></span>
<span class="normal"><a href="#__codelineno-7-20">20</a></span>
<span class="normal"><a href="#__codelineno-7-21">21</a></span>
<span class="normal"><a href="#__codelineno-7-22">22</a></span>
<span class="normal"><a href="#__codelineno-7-23">23</a></span>
<span class="normal"><a href="#__codelineno-7-24">24</a></span>
<span class="normal"><a href="#__codelineno-7-25">25</a></span>
<span class="normal"><a href="#__codelineno-7-26">26</a></span>
<span class="normal"><a href="#__codelineno-7-27">27</a></span>
<span class="normal"><a href="#__codelineno-7-28">28</a></span>
<span class="normal"><a href="#__codelineno-7-29">29</a></span>
<span class="normal"><a href="#__codelineno-7-30">30</a></span>
<span class="normal"><a href="#__codelineno-7-31">31</a></span>
<span class="normal"><a href="#__codelineno-7-32">32</a></span>
<span class="normal"><a href="#__codelineno-7-33">33</a></span>
<span class="normal"><a href="#__codelineno-7-34">34</a></span>
<span class="normal"><a href="#__codelineno-7-35">35</a></span>
<span class="normal"><a href="#__codelineno-7-36">36</a></span>
<span class="normal"><a href="#__codelineno-7-37">37</a></span>
<span class="normal"><a href="#__codelineno-7-38">38</a></span>
<span class="normal"><a href="#__codelineno-7-39">39</a></span>
<span class="normal"><a href="#__codelineno-7-40">40</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-7-1" name="__codelineno-7-1"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<a id="__codelineno-7-2" name="__codelineno-7-2"></a>
<a id="__codelineno-7-3" name="__codelineno-7-3"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-7-4" name="__codelineno-7-4"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>唐诗欣赏<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<a id="__codelineno-7-5" name="__codelineno-7-5"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-7-6" name="__codelineno-7-6"></a>
<a id="__codelineno-7-7" name="__codelineno-7-7"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-7-8" name="__codelineno-7-8"></a>  <span class="p">&lt;</span><span class="nt">a</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;top&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-7-9" name="__codelineno-7-9"></a>    <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>唐诗欣赏<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<a id="__codelineno-7-10" name="__codelineno-7-10"></a>  <span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<a id="__codelineno-7-11" name="__codelineno-7-11"></a>  <span class="p">&lt;</span><span class="nt">a</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;lb&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-7-12" name="__codelineno-7-12"></a>    <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>李白<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<a id="__codelineno-7-13" name="__codelineno-7-13"></a>  <span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<a id="__codelineno-7-14" name="__codelineno-7-14"></a>  <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#t.2&quot;</span> <span class="na">target</span><span class="o">=</span><span class="s">&quot;_blank&quot;</span><span class="p">&gt;</span>清平調三首<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;</span><span class="nt">br</span><span class="p">&gt;</span>
<a id="__codelineno-7-15" name="__codelineno-7-15"></a>  <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#t.1&quot;</span><span class="p">&gt;</span>長干行<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;</span><span class="nt">br</span><span class="p">&gt;</span>
<a id="__codelineno-7-16" name="__codelineno-7-16"></a>  <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#t.3&quot;</span><span class="p">&gt;</span>月下獨酌<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<a id="__codelineno-7-17" name="__codelineno-7-17"></a>  <span class="p">&lt;</span><span class="nt">hr</span><span class="p">&gt;&lt;</span><span class="nt">br</span><span class="p">&gt;&lt;</span><span class="nt">br</span><span class="p">&gt;</span>
<a id="__codelineno-7-18" name="__codelineno-7-18"></a>  <span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;t.2&quot;</span><span class="p">&gt;</span>清平調三首<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> <span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span>
<a id="__codelineno-7-19" name="__codelineno-7-19"></a>  雲想衣裳花想容，<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>春風拂檻露華濃。<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>若非群玉山頭見，<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>會向瑤台月下逢。
<a id="__codelineno-7-20" name="__codelineno-7-20"></a>  <span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>一枝紅艷露凝香，<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>雲雨巫山枉斷腸。<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>借問漢宮誰得似？<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>可憐飛燕倚新妝。
<a id="__codelineno-7-21" name="__codelineno-7-21"></a>  <span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>名花傾國兩相歡，<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>常得君王帶笑看。<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>解釋春風無限恨，<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>沈香亭北倚闌干。
<a id="__codelineno-7-22" name="__codelineno-7-22"></a>  <span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;t.1&quot;</span><span class="p">&gt;</span>長干行<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> <span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span>
<a id="__codelineno-7-23" name="__codelineno-7-23"></a>  <span class="p">&lt;</span><span class="nt">pre</span><span class="p">&gt;</span>
<a id="__codelineno-7-24" name="__codelineno-7-24"></a>  妾髮初覆額，<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>折花門前劇。<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>郎騎竹馬來，<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>遶床弄青梅。<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>同居長干里，
<a id="__codelineno-7-25" name="__codelineno-7-25"></a>  <span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>兩小無嫌猜。<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>十四為君婦，<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>羞顏未嘗開。<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>低頭向暗壁，<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>千喚不一回。
<a id="__codelineno-7-26" name="__codelineno-7-26"></a>  <span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>十五始展眉，<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>願同塵與灰。<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>常存抱柱信，<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>豈上望夫臺。<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>十六君遠行，
<a id="__codelineno-7-27" name="__codelineno-7-27"></a>  <span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>瞿塘灩澦堆。<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>五月不可觸，<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>猿鳴天上哀。<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>門前遲行跡，<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>一一生綠苔。
<a id="__codelineno-7-28" name="__codelineno-7-28"></a>  <span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>苔深不能掃，<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>落葉秋風早。<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>八月蝴蝶來，<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>雙飛西園草。<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>感此傷妾心，
<a id="__codelineno-7-29" name="__codelineno-7-29"></a>  <span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>坐愁紅顏老。<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>早晚下三巴，<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>預將書報家。<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>相迎不道遠，<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>直至長風沙。
<a id="__codelineno-7-30" name="__codelineno-7-30"></a>  <span class="p">&lt;/</span><span class="nt">pre</span><span class="p">&gt;</span>
<a id="__codelineno-7-31" name="__codelineno-7-31"></a>  <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#top&quot;</span><span class="p">&gt;</span>唐诗欣赏<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<a id="__codelineno-7-32" name="__codelineno-7-32"></a>  <span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;&lt;</span><span class="nt">br</span><span class="p">&gt;</span>
<a id="__codelineno-7-33" name="__codelineno-7-33"></a>  <span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;t.3&quot;</span><span class="p">&gt;</span>月下獨酌<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> <span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span>
<a id="__codelineno-7-34" name="__codelineno-7-34"></a>  <span class="p">&lt;</span><span class="nt">pre</span><span class="p">&gt;</span>
<a id="__codelineno-7-35" name="__codelineno-7-35"></a>  花間一壺酒，<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>獨酌無相親。<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>舉杯邀明月，<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>對影成三人。<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>月既不解飲，
<a id="__codelineno-7-36" name="__codelineno-7-36"></a>  <span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>影徒隨我身。<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>暫伴月將影，<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>行樂須及春。<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>我歌月裴回，<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>我舞影零亂。
<a id="__codelineno-7-37" name="__codelineno-7-37"></a>  <span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>醒時同交歡，<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>醉後各分散。<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>永結無情遊，<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>相期邈雲漢。<span class="p">&lt;/</span><span class="nt">pre</span><span class="p">&gt;</span>
<a id="__codelineno-7-38" name="__codelineno-7-38"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-7-39" name="__codelineno-7-39"></a>
<a id="__codelineno-7-40" name="__codelineno-7-40"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<p>不同页面链接：<strong>html_a_b.html</strong></p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">html_a_b.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-8-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-8-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-8-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-8-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-8-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-8-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-8-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-8-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-8-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-8-10">10</a></span>
<span class="normal"><a href="#__codelineno-8-11">11</a></span>
<span class="normal"><a href="#__codelineno-8-12">12</a></span>
<span class="normal"><a href="#__codelineno-8-13">13</a></span>
<span class="normal"><a href="#__codelineno-8-14">14</a></span>
<span class="normal"><a href="#__codelineno-8-15">15</a></span>
<span class="normal"><a href="#__codelineno-8-16">16</a></span>
<span class="normal"><a href="#__codelineno-8-17">17</a></span>
<span class="normal"><a href="#__codelineno-8-18">18</a></span>
<span class="normal"><a href="#__codelineno-8-19">19</a></span>
<span class="normal"><a href="#__codelineno-8-20">20</a></span>
<span class="normal"><a href="#__codelineno-8-21">21</a></span>
<span class="normal"><a href="#__codelineno-8-22">22</a></span>
<span class="normal"><a href="#__codelineno-8-23">23</a></span>
<span class="normal"><a href="#__codelineno-8-24">24</a></span>
<span class="normal"><a href="#__codelineno-8-25">25</a></span>
<span class="normal"><a href="#__codelineno-8-26">26</a></span>
<span class="normal"><a href="#__codelineno-8-27">27</a></span>
<span class="normal"><a href="#__codelineno-8-28">28</a></span>
<span class="normal"><a href="#__codelineno-8-29">29</a></span>
<span class="normal"><a href="#__codelineno-8-30">30</a></span>
<span class="normal"><a href="#__codelineno-8-31">31</a></span>
<span class="normal"><a href="#__codelineno-8-32">32</a></span>
<span class="normal"><a href="#__codelineno-8-33">33</a></span>
<span class="normal"><a href="#__codelineno-8-34">34</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-8-1" name="__codelineno-8-1"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<a id="__codelineno-8-2" name="__codelineno-8-2"></a>
<a id="__codelineno-8-3" name="__codelineno-8-3"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-8-4" name="__codelineno-8-4"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>李白<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<a id="__codelineno-8-5" name="__codelineno-8-5"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-8-6" name="__codelineno-8-6"></a>
<a id="__codelineno-8-7" name="__codelineno-8-7"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-8-8" name="__codelineno-8-8"></a>  <span class="p">&lt;</span><span class="nt">center</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;a.htm#lb&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-8-9" name="__codelineno-8-9"></a>      <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">align</span><span class="o">=</span><span class="s">&quot;center&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-8-10" name="__codelineno-8-10"></a>        <span class="p">&lt;</span><span class="nt">font</span> <span class="na">color</span><span class="o">=</span><span class="s">&quot;#339933&quot;</span><span class="p">&gt;</span>李白<span class="p">&lt;/</span><span class="nt">font</span><span class="p">&gt;</span>
<a id="__codelineno-8-11" name="__codelineno-8-11"></a>      <span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
<a id="__codelineno-8-12" name="__codelineno-8-12"></a>    <span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<a id="__codelineno-8-13" name="__codelineno-8-13"></a>    <span class="p">&lt;</span><span class="nt">font</span> <span class="na">color</span><span class="o">=</span><span class="s">&quot;#339933&quot;</span> <span class="na">size</span><span class="o">=</span><span class="s">&quot;+2&quot;</span><span class="p">&gt;</span>李白（701~762），<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>字太白，号青莲居士。
<a id="__codelineno-8-14" name="__codelineno-8-14"></a>      <span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>祖籍陇西成纪（今甘肃省天水市附近的秦安县），<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>隋朝末年其先租因罪住在中亚细亚。
<a id="__codelineno-8-15" name="__codelineno-8-15"></a>      <span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>李白的家世和出生地至今还是个谜，<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>学术界说法不一。<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>
<a id="__codelineno-8-16" name="__codelineno-8-16"></a>      一说李白就诞生在安西都护府所辖的碎叶城，<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>五岁时随父迁到绵州昌隆县青莲乡。<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>
<a id="__codelineno-8-17" name="__codelineno-8-17"></a>      <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>李白性情豪放，<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>喜爱纵横家的作风，
<a id="__codelineno-8-18" name="__codelineno-8-18"></a>        <span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>爱好任侠之事，轻视财货。<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>早年在蜀中度过。他的父亲是个富商。
<a id="__codelineno-8-19" name="__codelineno-8-19"></a>        <span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>李白二十五岁开始漫游全国，<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>走过湖北，江西，河南，山东等地.<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>
<a id="__codelineno-8-20" name="__codelineno-8-20"></a>      <span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-8-21" name="__codelineno-8-21"></a>      <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">NAME</span><span class="o">=</span><span class="s">&quot;libai&quot;</span><span class="p">&gt;</span>李白蔑视权贵<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>，
<a id="__codelineno-8-22" name="__codelineno-8-22"></a>        <span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>传说他喝醉酒，<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>曾在玄宗面前使高力士给他脱靴。<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>高力士认为这是很大的耻辱，
<a id="__codelineno-8-23" name="__codelineno-8-23"></a>        <span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>就摘取李白诗句激怒杨贵妃。 <span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>玄宗每次让李白做官，杨贵妃就加以阻止。
<a id="__codelineno-8-24" name="__codelineno-8-24"></a>        <span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>李白知道玄宗的亲信对他有意见，<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>于是恳求还家。<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>玄宗赐给他财物，放他开.<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>
<a id="__codelineno-8-25" name="__codelineno-8-25"></a>      <span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-8-26" name="__codelineno-8-26"></a>      <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>李白是我国唐代伟大的浪漫主义诗人，<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>被誉为“诗仙”。
<a id="__codelineno-8-27" name="__codelineno-8-27"></a>        <span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>他的诗豪迈瑰丽，诗里有突破现实的幻想。 <span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>也有对当时民生疾苦的反映和对政治黑暗的抨击。
<a id="__codelineno-8-28" name="__codelineno-8-28"></a>        <span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>他的散文具有清新明朗，<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>奔放流畅的特点。
<a id="__codelineno-8-29" name="__codelineno-8-29"></a>      <span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-8-30" name="__codelineno-8-30"></a>    <span class="p">&lt;/</span><span class="nt">font</span><span class="p">&gt;</span>
<a id="__codelineno-8-31" name="__codelineno-8-31"></a>  <span class="p">&lt;/</span><span class="nt">center</span><span class="p">&gt;</span>
<a id="__codelineno-8-32" name="__codelineno-8-32"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-8-33" name="__codelineno-8-33"></a>
<a id="__codelineno-8-34" name="__codelineno-8-34"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
</li>
<li>
<p>在站点内部建立链接</p>
<table>
<thead>
<tr>
<th>当前页面</th>
<th>被链接页面</th>
<th>超链接代码</th>
</tr>
</thead>
<tbody>
<tr>
<td>2-1.html</td>
<td>3-1.html</td>
<td><code>&lt;a href="3-1.html"&gt;超链接元素&lt;/a&gt;</code></td>
</tr>
<tr>
<td>3-1.html</td>
<td>1-1.html</td>
<td><code>&lt;a href="asm/1-1.html"&gt;超链接元素&lt;/a&gt;</code></td>
</tr>
<tr>
<td>sy.html</td>
<td>1-1.html</td>
<td><code>&lt;a href="ssm/asm/1-1.html"&gt;超链接元素&lt;/a&gt;</code></td>
</tr>
<tr>
<td>2-1.html</td>
<td>sy.html</td>
<td><code>&lt;a href="../sy.html"&gt;超链接元素&lt;/a&gt;</code></td>
</tr>
<tr>
<td>1-1.html</td>
<td>sy.html</td>
<td><code>&lt;a href="../../sy.html"&gt;超链接元素&lt;/a&gt;</code></td>
</tr>
<tr>
<td>sy.html</td>
<td>2-1.html</td>
<td><code>&lt;a href="ssm/2-1.html"&gt;超链接元素&lt;/a&gt;</code></td>
</tr>
</tbody>
</table>
</li>
<li>
<p>外部链接</p>
<table>
<thead>
<tr>
<th>服 务</th>
<th>URL格式</th>
<th>描 述</th>
</tr>
</thead>
<tbody>
<tr>
<td>WWW</td>
<td>http://"地址"</td>
<td>进入万维网站点</td>
</tr>
<tr>
<td>Ftp</td>
<td>ftp://""</td>
<td>进入文件传输协议</td>
</tr>
<tr>
<td>Telnet</td>
<td>telnet://""</td>
<td>启动Telnet方式</td>
</tr>
<tr>
<td>Gopher</td>
<td>gopher://""</td>
<td>访问一个gopher服务器</td>
</tr>
<tr>
<td>News</td>
<td>news://""</td>
<td>启动新闻讨论组</td>
</tr>
<tr>
<td>Email</td>
<td>email://""</td>
<td>启动邮件</td>
</tr>
</tbody>
</table>
</li>
<li>
<p>发送E-mail</p>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-9-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-9-1" name="__codelineno-9-1"></a><span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;mailto:E-mali 地址: subject=邮件主题&quot;</span><span class="p">&gt;</span>描述文字<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<table>
<thead>
<tr>
<th>属性</th>
<th>描  述</th>
</tr>
</thead>
<tbody>
<tr>
<td>Subject</td>
<td>电子邮件主题</td>
</tr>
<tr>
<td>Cc</td>
<td>抄送收件人</td>
</tr>
<tr>
<td>Body</td>
<td>主题内容</td>
</tr>
<tr>
<td>Bcc</td>
<td>暗送收件人</td>
</tr>
</tbody>
</table>
</li>
<li>
<p>链接FTP</p>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-10-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-10-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-10-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-10-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-10-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-10-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-10-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-10-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-10-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-10-10">10</a></span>
<span class="normal"><a href="#__codelineno-10-11">11</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-10-1" name="__codelineno-10-1"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<a id="__codelineno-10-2" name="__codelineno-10-2"></a>
<a id="__codelineno-10-3" name="__codelineno-10-3"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-10-4" name="__codelineno-10-4"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>链接ftp主机<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<a id="__codelineno-10-5" name="__codelineno-10-5"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-10-6" name="__codelineno-10-6"></a>
<a id="__codelineno-10-7" name="__codelineno-10-7"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-10-8" name="__codelineno-10-8"></a>  <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">ftp://ftp.pku.edu.cn</span><span class="p">&gt;</span>北京大学ftp站点<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> <span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-10-9" name="__codelineno-10-9"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-10-10" name="__codelineno-10-10"></a>
<a id="__codelineno-10-11" name="__codelineno-10-11"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
</li>
</ol>
<h4 id="img">图片<code>&lt;img&gt;</code></h4>
<ol>
<li>
<p>普通插入图片(使用自己电脑上图片替换链接图片)</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">html_img.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-11-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-11-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-11-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-11-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-11-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-11-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-11-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-11-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-11-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-11-10">10</a></span>
<span class="normal"><a href="#__codelineno-11-11">11</a></span>
<span class="normal"><a href="#__codelineno-11-12">12</a></span>
<span class="normal"><a href="#__codelineno-11-13">13</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-11-1" name="__codelineno-11-1"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<a id="__codelineno-11-2" name="__codelineno-11-2"></a>
<a id="__codelineno-11-3" name="__codelineno-11-3"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-11-4" name="__codelineno-11-4"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>普通插入图片<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<a id="__codelineno-11-5" name="__codelineno-11-5"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-11-6" name="__codelineno-11-6"></a>
<a id="__codelineno-11-7" name="__codelineno-11-7"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-11-8" name="__codelineno-11-8"></a>  <span class="p">&lt;</span><span class="nt">center</span><span class="p">&gt;</span>
<a id="__codelineno-11-9" name="__codelineno-11-9"></a>    <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>爱在深秋<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/chatgpt.png&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-11-10" name="__codelineno-11-10"></a>  <span class="p">&lt;/</span><span class="nt">center</span><span class="p">&gt;</span>
<a id="__codelineno-11-11" name="__codelineno-11-11"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-11-12" name="__codelineno-11-12"></a>
<a id="__codelineno-11-13" name="__codelineno-11-13"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<details class="tip">
<summary>运行结果</summary>
<p><iframe src="./src/html_img.html" frameborder="0" width="100%" height="300"></iframe></p>
</details>
</li>
<li>
<p>设定上下左右空白位置 </p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">html_img_space.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-12-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-12-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-12-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-12-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-12-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-12-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-12-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-12-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-12-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-12-10">10</a></span>
<span class="normal"><a href="#__codelineno-12-11">11</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-12-1" name="__codelineno-12-1"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<a id="__codelineno-12-2" name="__codelineno-12-2"></a>
<a id="__codelineno-12-3" name="__codelineno-12-3"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-12-4" name="__codelineno-12-4"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>设定图像与文本之间的距离<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<a id="__codelineno-12-5" name="__codelineno-12-5"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-12-6" name="__codelineno-12-6"></a>
<a id="__codelineno-12-7" name="__codelineno-12-7"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-12-8" name="__codelineno-12-8"></a>  <span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/chatgpt.png&quot;</span> <span class="na">align</span><span class="o">=</span><span class="s">&quot;left&quot;</span> <span class="na">hspace</span><span class="o">=</span><span class="s">&quot;20&quot;</span> <span class="na">vspace</span><span class="o">=</span><span class="s">&quot;20&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-12-9" name="__codelineno-12-9"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-12-10" name="__codelineno-12-10"></a>
<a id="__codelineno-12-11" name="__codelineno-12-11"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
</li>
<li>
<p>设定字画对其方式 </p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">html_img_align.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-13-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-13-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-13-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-13-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-13-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-13-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-13-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-13-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-13-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-13-10">10</a></span>
<span class="normal"><a href="#__codelineno-13-11">11</a></span>
<span class="normal"><a href="#__codelineno-13-12">12</a></span>
<span class="normal"><a href="#__codelineno-13-13">13</a></span>
<span class="normal"><a href="#__codelineno-13-14">14</a></span>
<span class="normal"><a href="#__codelineno-13-15">15</a></span>
<span class="normal"><a href="#__codelineno-13-16">16</a></span>
<span class="normal"><a href="#__codelineno-13-17">17</a></span>
<span class="normal"><a href="#__codelineno-13-18">18</a></span>
<span class="normal"><a href="#__codelineno-13-19">19</a></span>
<span class="normal"><a href="#__codelineno-13-20">20</a></span>
<span class="normal"><a href="#__codelineno-13-21">21</a></span>
<span class="normal"><a href="#__codelineno-13-22">22</a></span>
<span class="normal"><a href="#__codelineno-13-23">23</a></span>
<span class="normal"><a href="#__codelineno-13-24">24</a></span>
<span class="normal"><a href="#__codelineno-13-25">25</a></span>
<span class="normal"><a href="#__codelineno-13-26">26</a></span>
<span class="normal"><a href="#__codelineno-13-27">27</a></span>
<span class="normal"><a href="#__codelineno-13-28">28</a></span>
<span class="normal"><a href="#__codelineno-13-29">29</a></span>
<span class="normal"><a href="#__codelineno-13-30">30</a></span>
<span class="normal"><a href="#__codelineno-13-31">31</a></span>
<span class="normal"><a href="#__codelineno-13-32">32</a></span>
<span class="normal"><a href="#__codelineno-13-33">33</a></span>
<span class="normal"><a href="#__codelineno-13-34">34</a></span>
<span class="normal"><a href="#__codelineno-13-35">35</a></span>
<span class="normal"><a href="#__codelineno-13-36">36</a></span>
<span class="normal"><a href="#__codelineno-13-37">37</a></span>
<span class="normal"><a href="#__codelineno-13-38">38</a></span>
<span class="normal"><a href="#__codelineno-13-39">39</a></span>
<span class="normal"><a href="#__codelineno-13-40">40</a></span>
<span class="normal"><a href="#__codelineno-13-41">41</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-13-1" name="__codelineno-13-1"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<a id="__codelineno-13-2" name="__codelineno-13-2"></a>
<a id="__codelineno-13-3" name="__codelineno-13-3"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-13-4" name="__codelineno-13-4"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>控制图像相对于文字基准线的水平对齐方式<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<a id="__codelineno-13-5" name="__codelineno-13-5"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-13-6" name="__codelineno-13-6"></a>
<a id="__codelineno-13-7" name="__codelineno-13-7"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-13-8" name="__codelineno-13-8"></a>  <span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/chatgpt.png&quot;</span> <span class="na">align</span><span class="o">=</span><span class="s">&quot;left&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-13-9" name="__codelineno-13-9"></a>  此图像相对于文字基准线为靠上对齐的多行文字<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>试想在圆月朦胧之夜，海棠是这样的妩媚而嫣润；
<a id="__codelineno-13-10" name="__codelineno-13-10"></a>  枝头的好鸟为什么却双栖而各梦呢？在这夜深人静的当儿，那高踞着的一只八哥儿，又为何尽撑着眼皮儿不
<a id="__codelineno-13-11" name="__codelineno-13-11"></a>  肯睡去呢？ 他到底等什么来着？舍不得那淡淡的月儿么？舍不得那疏疏的帘儿么？不，不，不，您得到帘
<a id="__codelineno-13-12" name="__codelineno-13-12"></a>  下去找， 您得向帘中去找——您该找着那卷帘人了？他的情韵风怀，原是这样这样的哟！朦胧的岂独月呢；
<a id="__codelineno-13-13" name="__codelineno-13-13"></a>  岂独鸟呢？但是， 咫尺天涯，教我如何耐得？<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>我拚着千呼万唤；你能够出来么？
<a id="__codelineno-13-14" name="__codelineno-13-14"></a>  <span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>这页画布局那样经济，设色那样柔活，故精采足以动人。虽是区区尺幅，而情韵之厚，已足沦肌浃髓而有余。
<a id="__codelineno-13-15" name="__codelineno-13-15"></a>  我看了这画。瞿然而惊：留恋之怀，不能自已。故将所感受的印象细细写出，以志这一段因缘。但我于中西的
<a id="__codelineno-13-16" name="__codelineno-13-16"></a>  画都是门外汉， 所说的话不免为内行所笑。——那也只好由他了。
<a id="__codelineno-13-17" name="__codelineno-13-17"></a>  <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-13-18" name="__codelineno-13-18"></a>    <span class="p">&lt;</span><span class="nt">hr</span> <span class="na">color</span><span class="o">=</span><span class="s">&quot;#00ff00&quot;</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/chatgpt.png&quot;</span> <span class="na">align</span><span class="o">=</span><span class="s">&quot;right&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-13-19" name="__codelineno-13-19"></a>    此图像相对于文字基准线为靠上的多行文字对齐<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>试想在圆月朦胧之夜，海棠是这样的妩媚而嫣润；
<a id="__codelineno-13-20" name="__codelineno-13-20"></a>    枝头的好鸟为什么却双栖而各梦呢？在这夜深人静的当儿，那高踞着的一只八哥儿，又为何尽撑着眼皮儿
<a id="__codelineno-13-21" name="__codelineno-13-21"></a>    不肯睡去呢？ 他到底等什么来着？舍不得那淡淡的月儿么？舍不得那疏疏的帘儿么？不，不，不，
<a id="__codelineno-13-22" name="__codelineno-13-22"></a>    您得到帘下去找， 您得向帘中去找——您该找着那卷帘人了？他的情韵风怀，原是这样这样的哟！
<a id="__codelineno-13-23" name="__codelineno-13-23"></a>    朦胧的岂独月呢； 岂独鸟呢？但是，咫尺天涯，教我如何耐得？<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>我拚着千呼万唤；你能够出
<a id="__codelineno-13-24" name="__codelineno-13-24"></a>    来么？ <span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>这页画布局那样经济，设色那样柔活，故精采足以动人。虽是区区尺幅，而情韵之厚，
<a id="__codelineno-13-25" name="__codelineno-13-25"></a>    已足沦肌浃髓而有余。 我看了这画。瞿然而惊：留恋之怀，不能自已。故将所感受的印象细细写出，
<a id="__codelineno-13-26" name="__codelineno-13-26"></a>    以志这一段因缘。 但我于中西的画都是门外汉，所说的话不免为内行所笑。——那也只好由他了。
<a id="__codelineno-13-27" name="__codelineno-13-27"></a>  <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-13-28" name="__codelineno-13-28"></a>    <span class="p">&lt;</span><span class="nt">hr</span> <span class="na">color</span><span class="o">=</span><span class="s">&quot;#00ff00&quot;</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/chatgpt.png&quot;</span> <span class="na">align</span><span class="o">=</span><span class="s">&quot;top&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-13-29" name="__codelineno-13-29"></a>    此图像相对于文字基准线为顶部单行对齐
<a id="__codelineno-13-30" name="__codelineno-13-30"></a>  <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-13-31" name="__codelineno-13-31"></a>    <span class="p">&lt;</span><span class="nt">hr</span> <span class="na">color</span><span class="o">=</span><span class="s">&quot;#00ff00&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-13-32" name="__codelineno-13-32"></a>    <span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/chatgpt.png&quot;</span> <span class="na">align</span><span class="o">=</span><span class="s">bottom</span><span class="p">&gt;</span>
<a id="__codelineno-13-33" name="__codelineno-13-33"></a>    此图像相对于文字基准线为底线单行对齐
<a id="__codelineno-13-34" name="__codelineno-13-34"></a>  <span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-13-35" name="__codelineno-13-35"></a>  <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-13-36" name="__codelineno-13-36"></a>    <span class="p">&lt;</span><span class="nt">hr</span> <span class="na">color</span><span class="o">=</span><span class="s">&quot;#00ff00&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-13-37" name="__codelineno-13-37"></a>  <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/chatgpt.png&quot;</span> <span class="na">align</span><span class="o">=</span><span class="s">&quot;middle&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-13-38" name="__codelineno-13-38"></a>    此图像相对于文字基准线为置中单行对齐<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-13-39" name="__codelineno-13-39"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-13-40" name="__codelineno-13-40"></a>
<a id="__codelineno-13-41" name="__codelineno-13-41"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
</li>
<li>
<p>图片大小设定</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">html_img_size.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-14-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-14-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-14-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-14-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-14-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-14-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-14-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-14-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-14-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-14-10">10</a></span>
<span class="normal"><a href="#__codelineno-14-11">11</a></span>
<span class="normal"><a href="#__codelineno-14-12">12</a></span>
<span class="normal"><a href="#__codelineno-14-13">13</a></span>
<span class="normal"><a href="#__codelineno-14-14">14</a></span>
<span class="normal"><a href="#__codelineno-14-15">15</a></span>
<span class="normal"><a href="#__codelineno-14-16">16</a></span>
<span class="normal"><a href="#__codelineno-14-17">17</a></span>
<span class="normal"><a href="#__codelineno-14-18">18</a></span>
<span class="normal"><a href="#__codelineno-14-19">19</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-14-1" name="__codelineno-14-1"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<a id="__codelineno-14-2" name="__codelineno-14-2"></a>
<a id="__codelineno-14-3" name="__codelineno-14-3"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-14-4" name="__codelineno-14-4"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>图像大小的设定<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<a id="__codelineno-14-5" name="__codelineno-14-5"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-14-6" name="__codelineno-14-6"></a>
<a id="__codelineno-14-7" name="__codelineno-14-7"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-14-8" name="__codelineno-14-8"></a>  <span class="p">&lt;</span><span class="nt">center</span><span class="p">&gt;</span>
<a id="__codelineno-14-9" name="__codelineno-14-9"></a>    <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>缩小图像
<a id="__codelineno-14-10" name="__codelineno-14-10"></a>    <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/chatgpt.png&quot;</span> <span class="na">width</span><span class="o">=</span><span class="s">&quot;350&quot;</span> <span class="na">height</span><span class="o">=</span><span class="s">&quot;200&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-14-11" name="__codelineno-14-11"></a>    <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>原图显示
<a id="__codelineno-14-12" name="__codelineno-14-12"></a>    <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/chatgpt.png&quot;</span> <span class="na">width</span><span class="o">=</span><span class="s">&quot;400&quot;</span> <span class="na">height</span><span class="o">=</span><span class="s">&quot;236&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-14-13" name="__codelineno-14-13"></a>    <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>放大图像
<a id="__codelineno-14-14" name="__codelineno-14-14"></a>    <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/chatgpt.png&quot;</span> <span class="na">width</span><span class="o">=</span><span class="s">&quot;500&quot;</span> <span class="na">height</span><span class="o">=</span><span class="s">&quot;250&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-14-15" name="__codelineno-14-15"></a>    <span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-14-16" name="__codelineno-14-16"></a>  <span class="p">&lt;/</span><span class="nt">center</span><span class="p">&gt;</span>
<a id="__codelineno-14-17" name="__codelineno-14-17"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-14-18" name="__codelineno-14-18"></a>
<a id="__codelineno-14-19" name="__codelineno-14-19"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
</li>
<li>
<p>图像边框的设定</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">html_img_border.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-15-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-15-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-15-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-15-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-15-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-15-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-15-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-15-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-15-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-15-10">10</a></span>
<span class="normal"><a href="#__codelineno-15-11">11</a></span>
<span class="normal"><a href="#__codelineno-15-12">12</a></span>
<span class="normal"><a href="#__codelineno-15-13">13</a></span>
<span class="normal"><a href="#__codelineno-15-14">14</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-15-1" name="__codelineno-15-1"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<a id="__codelineno-15-2" name="__codelineno-15-2"></a>
<a id="__codelineno-15-3" name="__codelineno-15-3"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-15-4" name="__codelineno-15-4"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>设定图像的边框<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<a id="__codelineno-15-5" name="__codelineno-15-5"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-15-6" name="__codelineno-15-6"></a>
<a id="__codelineno-15-7" name="__codelineno-15-7"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-15-8" name="__codelineno-15-8"></a>  <span class="p">&lt;</span><span class="nt">center</span><span class="p">&gt;</span>
<a id="__codelineno-15-9" name="__codelineno-15-9"></a>    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">align</span><span class="o">=</span><span class="s">&quot;center&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-15-10" name="__codelineno-15-10"></a>      <span class="p">&lt;</span><span class="nt">pre</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/chatgpt.png&quot;</span> <span class="na">border</span><span class="o">=</span><span class="s">&quot;10&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">pre</span><span class="p">&gt;</span>
<a id="__codelineno-15-11" name="__codelineno-15-11"></a>    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-15-12" name="__codelineno-15-12"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-15-13" name="__codelineno-15-13"></a>
<a id="__codelineno-15-14" name="__codelineno-15-14"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
</li>
<li>
<p>图像的超链接 </p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">html_img_a.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-16-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-16-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-16-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-16-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-16-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-16-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-16-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-16-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-16-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-16-10">10</a></span>
<span class="normal"><a href="#__codelineno-16-11">11</a></span>
<span class="normal"><a href="#__codelineno-16-12">12</a></span>
<span class="normal"><a href="#__codelineno-16-13">13</a></span>
<span class="normal"><a href="#__codelineno-16-14">14</a></span>
<span class="normal"><a href="#__codelineno-16-15">15</a></span>
<span class="normal"><a href="#__codelineno-16-16">16</a></span>
<span class="normal"><a href="#__codelineno-16-17">17</a></span>
<span class="normal"><a href="#__codelineno-16-18">18</a></span>
<span class="normal"><a href="#__codelineno-16-19">19</a></span>
<span class="normal"><a href="#__codelineno-16-20">20</a></span>
<span class="normal"><a href="#__codelineno-16-21">21</a></span>
<span class="normal"><a href="#__codelineno-16-22">22</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-16-1" name="__codelineno-16-1"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<a id="__codelineno-16-2" name="__codelineno-16-2"></a>
<a id="__codelineno-16-3" name="__codelineno-16-3"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-16-4" name="__codelineno-16-4"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>使用图像为选取的对象<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<a id="__codelineno-16-5" name="__codelineno-16-5"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-16-6" name="__codelineno-16-6"></a>
<a id="__codelineno-16-7" name="__codelineno-16-7"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-16-8" name="__codelineno-16-8"></a>  <span class="p">&lt;</span><span class="nt">p</span> <span class="na">align</span><span class="o">=</span><span class="s">&quot;center&quot;</span><span class="p">&gt;</span><span class="ni">&amp;nbsp;</span><span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-16-9" name="__codelineno-16-9"></a>  <span class="p">&lt;</span><span class="nt">h1</span> <span class="na">align</span><span class="o">=</span><span class="s">&quot;center&quot;</span><span class="p">&gt;</span>图片的超链接<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
<a id="__codelineno-16-10" name="__codelineno-16-10"></a>  <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-16-11" name="__codelineno-16-11"></a>    <span class="p">&lt;</span><span class="nt">center</span><span class="p">&gt;</span>
<a id="__codelineno-16-12" name="__codelineno-16-12"></a>      <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;http://www.sohu.com/&quot;</span> <span class="na">target</span><span class="o">=</span><span class="s">&quot;_blank&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-16-13" name="__codelineno-16-13"></a>        <span class="p">&lt;</span><span class="nt">img</span> <span class="na">alt</span><span class="o">=</span><span class="s">&quot;搜狐网站&quot;</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/chatgpt.png&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-16-14" name="__codelineno-16-14"></a>      <span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<a id="__codelineno-16-15" name="__codelineno-16-15"></a>      <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-16-16" name="__codelineno-16-16"></a>        <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;http://www.baidu.com/&quot;</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">alt</span><span class="o">=</span><span class="s">&quot;百度搜索&quot;</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/chatgpt.png&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<a id="__codelineno-16-17" name="__codelineno-16-17"></a>      <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-16-18" name="__codelineno-16-18"></a>        <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;http://www.sina.com.cn&quot;</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">alt</span><span class="o">=</span><span class="s">&quot;新浪网站&quot;</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/chatgpt.png&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<a id="__codelineno-16-19" name="__codelineno-16-19"></a>    <span class="p">&lt;/</span><span class="nt">center</span><span class="p">&gt;</span>
<a id="__codelineno-16-20" name="__codelineno-16-20"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-16-21" name="__codelineno-16-21"></a>
<a id="__codelineno-16-22" name="__codelineno-16-22"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
</li>
<li>
<p>用<code>&lt;img&gt;</code>标签插入avi文件 </p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">html_img_avi.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-17-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-17-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-17-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-17-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-17-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-17-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-17-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-17-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-17-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-17-10">10</a></span>
<span class="normal"><a href="#__codelineno-17-11">11</a></span>
<span class="normal"><a href="#__codelineno-17-12">12</a></span>
<span class="normal"><a href="#__codelineno-17-13">13</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-17-1" name="__codelineno-17-1"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<a id="__codelineno-17-2" name="__codelineno-17-2"></a>
<a id="__codelineno-17-3" name="__codelineno-17-3"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-17-4" name="__codelineno-17-4"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>设定图像的边框<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<a id="__codelineno-17-5" name="__codelineno-17-5"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-17-6" name="__codelineno-17-6"></a>
<a id="__codelineno-17-7" name="__codelineno-17-7"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-17-8" name="__codelineno-17-8"></a>  <span class="p">&lt;</span><span class="nt">center</span><span class="p">&gt;</span>
<a id="__codelineno-17-9" name="__codelineno-17-9"></a>    <span class="p">&lt;</span><span class="nt">p</span> <span class="na">align</span><span class="o">=</span><span class="s">&quot;center&quot;</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">dynsrc</span><span class="o">=</span><span class="s">&quot;../../imge/mmm.avi&quot;</span> <span class="na">loop</span><span class="o">=</span><span class="s">&quot;-1&quot;</span> <span class="na">start</span><span class="o">=</span><span class="s">&quot;mouseover&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-17-10" name="__codelineno-17-10"></a>  <span class="p">&lt;/</span><span class="nt">center</span><span class="p">&gt;</span>
<a id="__codelineno-17-11" name="__codelineno-17-11"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-17-12" name="__codelineno-17-12"></a>
<a id="__codelineno-17-13" name="__codelineno-17-13"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
</li>
</ol>
<h4 id="marquee">滚动<code>&lt;marquee&gt;</code></h4>
<ol>
<li>
<p>滚动字幕<code>&lt;marquee&gt;</code></p>
<table>
<thead>
<tr>
<th>属 性</th>
<th>描 述</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>指定对齐方式top,middle,bottom</td>
</tr>
<tr>
<td>scroll</td>
<td>单向运动</td>
</tr>
<tr>
<td>slide</td>
<td>如幻灯片,一格格的，效果是文字一接触左边就停止。</td>
</tr>
<tr>
<td>alternate</td>
<td>左右往返运动</td>
</tr>
<tr>
<td>bgcolor</td>
<td>设定文字卷动范围的背景颜色</td>
</tr>
<tr>
<td>loop</td>
<td>设定文字卷动次数，其值可以是正整数或 infinite表示无限次 默认为无限循环</td>
</tr>
<tr>
<td>height</td>
<td>设定字幕高度</td>
</tr>
<tr>
<td>width</td>
<td>设定字幕宽度</td>
</tr>
<tr>
<td>scrollamount</td>
<td>指定每次移动的速度,数值越大速度越快</td>
</tr>
<tr>
<td>scrolldelay</td>
<td>文字每一次滚动的停顿时间，单位是毫秒。时间越短滚动越快</td>
</tr>
<tr>
<td>hspace</td>
<td>指定字幕左右空白区域的大小</td>
</tr>
<tr>
<td>vspace</td>
<td>指定字幕上下空白区域的大小</td>
</tr>
<tr>
<td>direction</td>
<td>设定文字的卷动方向,left表示向左,right表示向右,up表示往上滚动</td>
</tr>
<tr>
<td>behavior</td>
<td>指定移动方式，scroll表示滚动播出，slibe表示滚动到一方后停止，</td>
</tr>
<tr>
<td>alternate</td>
<td>表示滚动到一方后向相反方向滚动。</td>
</tr>
</tbody>
</table>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">html_marquee.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-18-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-18-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-18-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-18-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-18-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-18-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-18-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-18-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-18-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-18-10">10</a></span>
<span class="normal"><a href="#__codelineno-18-11">11</a></span>
<span class="normal"><a href="#__codelineno-18-12">12</a></span>
<span class="normal"><a href="#__codelineno-18-13">13</a></span>
<span class="normal"><a href="#__codelineno-18-14">14</a></span>
<span class="normal"><a href="#__codelineno-18-15">15</a></span>
<span class="normal"><a href="#__codelineno-18-16">16</a></span>
<span class="normal"><a href="#__codelineno-18-17">17</a></span>
<span class="normal"><a href="#__codelineno-18-18">18</a></span>
<span class="normal"><a href="#__codelineno-18-19">19</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-18-1" name="__codelineno-18-1"></a><span class="cp">&lt;!DOCTYPE html&gt;</span>
<a id="__codelineno-18-2" name="__codelineno-18-2"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<a id="__codelineno-18-3" name="__codelineno-18-3"></a>
<a id="__codelineno-18-4" name="__codelineno-18-4"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-18-5" name="__codelineno-18-5"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Marquee<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<a id="__codelineno-18-6" name="__codelineno-18-6"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-18-7" name="__codelineno-18-7"></a>
<a id="__codelineno-18-8" name="__codelineno-18-8"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-18-9" name="__codelineno-18-9"></a>  <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-18-10" name="__codelineno-18-10"></a>    <span class="p">&lt;</span><span class="nt">marquee</span> <span class="na">bgcolor</span><span class="o">=</span><span class="s">&quot;Green&quot;</span> <span class="na">direction</span><span class="o">=</span><span class="s">&quot;left&quot;</span> <span class="na">loop</span><span class="o">=</span><span class="s">&quot;&quot;</span> <span class="p">&gt;</span>
<a id="__codelineno-18-11" name="__codelineno-18-11"></a>      <span class="p">&lt;</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;height:100px;color:white;&quot;</span><span class="p">&gt;</span>水平文字<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-18-12" name="__codelineno-18-12"></a>    <span class="p">&lt;/</span><span class="nt">marquee</span><span class="p">&gt;</span>
<a id="__codelineno-18-13" name="__codelineno-18-13"></a>    <span class="p">&lt;</span><span class="nt">marquee</span> <span class="na">bgcolor</span><span class="o">=</span><span class="s">&quot;blue&quot;</span> <span class="na">direction</span><span class="o">=</span><span class="s">&quot;up&quot;</span> <span class="na">loop</span><span class="o">=</span><span class="s">&quot;&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-18-14" name="__codelineno-18-14"></a>      <span class="p">&lt;</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;height:100px;color:yellow;text-align: center;&quot;</span><span class="p">&gt;</span>垂直文字<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-18-15" name="__codelineno-18-15"></a>    <span class="p">&lt;/</span><span class="nt">marquee</span><span class="p">&gt;</span>
<a id="__codelineno-18-16" name="__codelineno-18-16"></a>  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-18-17" name="__codelineno-18-17"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-18-18" name="__codelineno-18-18"></a>
<a id="__codelineno-18-19" name="__codelineno-18-19"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
</li>
</ol>
<h4 id="iframe">浮动窗口<code>&lt;iframe&gt;</code></h4>
<ol>
<li>
<p>一般应用</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">html_iframe.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-19-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-19-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-19-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-19-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-19-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-19-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-19-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-19-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-19-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-19-10">10</a></span>
<span class="normal"><a href="#__codelineno-19-11">11</a></span>
<span class="normal"><a href="#__codelineno-19-12">12</a></span>
<span class="normal"><a href="#__codelineno-19-13">13</a></span>
<span class="normal"><a href="#__codelineno-19-14">14</a></span>
<span class="normal"><a href="#__codelineno-19-15">15</a></span>
<span class="normal"><a href="#__codelineno-19-16">16</a></span>
<span class="normal"><a href="#__codelineno-19-17">17</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-19-1" name="__codelineno-19-1"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<a id="__codelineno-19-2" name="__codelineno-19-2"></a>
<a id="__codelineno-19-3" name="__codelineno-19-3"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-19-4" name="__codelineno-19-4"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>浮动框架<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<a id="__codelineno-19-5" name="__codelineno-19-5"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-19-6" name="__codelineno-19-6"></a>
<a id="__codelineno-19-7" name="__codelineno-19-7"></a><span class="p">&lt;</span><span class="nt">body</span> <span class="na">bgcolor</span><span class="o">=</span><span class="s">&quot;#E1FFE1&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-19-8" name="__codelineno-19-8"></a>  <span class="p">&lt;</span><span class="nt">center</span><span class="p">&gt;</span>
<a id="__codelineno-19-9" name="__codelineno-19-9"></a>    <span class="p">&lt;</span><span class="nt">iframe</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;html_img.html&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;aa&quot;</span> <span class="na">width</span><span class="o">=</span><span class="s">&quot;600&quot;</span> <span class="na">height</span><span class="o">=</span><span class="s">&quot;400&quot;</span> <span class="na">marginwidth</span><span class="o">=</span><span class="s">&quot;30&quot;</span> 
<a id="__codelineno-19-10" name="__codelineno-19-10"></a>    <span class="na">marginheight</span><span class="o">=</span><span class="s">&quot;20&quot;</span> <span class="na">align</span><span class="o">=</span><span class="s">&quot;middle&quot;</span> <span class="na">allowtransparency</span><span class="o">=</span><span class="s">&quot;true&quot;</span><span class="p">&gt;</span> 这是一个浮动窗口<span class="p">&lt;/</span><span class="nt">iframe</span><span class="p">&gt;</span>
<a id="__codelineno-19-11" name="__codelineno-19-11"></a>    <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;html_a_a.html&quot;</span> <span class="na">target</span><span class="o">=</span><span class="s">&quot;aa&quot;</span><span class="p">&gt;</span>超链接<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-19-12" name="__codelineno-19-12"></a>    <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;html_hn.html&quot;</span> <span class="na">target</span><span class="o">=</span><span class="s">&quot;aa&quot;</span><span class="p">&gt;</span>标题<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-19-13" name="__codelineno-19-13"></a>    <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;html_marquee.html&quot;</span> <span class="na">target</span><span class="o">=</span><span class="s">&quot;aa&quot;</span><span class="p">&gt;</span>滚动<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-19-14" name="__codelineno-19-14"></a>  <span class="p">&lt;/</span><span class="nt">center</span><span class="p">&gt;</span>
<a id="__codelineno-19-15" name="__codelineno-19-15"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-19-16" name="__codelineno-19-16"></a>
<a id="__codelineno-19-17" name="__codelineno-19-17"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
</li>
<li>
<p>自适应窗口高度</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">html_iframe_fit.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-20-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-20-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-20-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-20-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-20-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-20-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-20-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-20-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-20-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-20-10">10</a></span>
<span class="normal"><a href="#__codelineno-20-11">11</a></span>
<span class="normal"><a href="#__codelineno-20-12">12</a></span>
<span class="normal"><a href="#__codelineno-20-13">13</a></span>
<span class="normal"><a href="#__codelineno-20-14">14</a></span>
<span class="normal"><a href="#__codelineno-20-15">15</a></span>
<span class="normal"><a href="#__codelineno-20-16">16</a></span>
<span class="normal"><a href="#__codelineno-20-17">17</a></span>
<span class="normal"><a href="#__codelineno-20-18">18</a></span>
<span class="normal"><a href="#__codelineno-20-19">19</a></span>
<span class="normal"><a href="#__codelineno-20-20">20</a></span>
<span class="normal"><a href="#__codelineno-20-21">21</a></span>
<span class="normal"><a href="#__codelineno-20-22">22</a></span>
<span class="normal"><a href="#__codelineno-20-23">23</a></span>
<span class="normal"><a href="#__codelineno-20-24">24</a></span>
<span class="normal"><a href="#__codelineno-20-25">25</a></span>
<span class="normal"><a href="#__codelineno-20-26">26</a></span>
<span class="normal"><a href="#__codelineno-20-27">27</a></span>
<span class="normal"><a href="#__codelineno-20-28">28</a></span>
<span class="normal"><a href="#__codelineno-20-29">29</a></span>
<span class="normal"><a href="#__codelineno-20-30">30</a></span>
<span class="normal"><a href="#__codelineno-20-31">31</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-20-1" name="__codelineno-20-1"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<a id="__codelineno-20-2" name="__codelineno-20-2"></a>
<a id="__codelineno-20-3" name="__codelineno-20-3"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-20-4" name="__codelineno-20-4"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>浮动框架<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<a id="__codelineno-20-5" name="__codelineno-20-5"></a>  <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
<a id="__codelineno-20-6" name="__codelineno-20-6"></a><span class="w">    </span><span class="kd">var</span><span class="w"> </span><span class="nx">lastHeight</span><span class="p">;</span>
<a id="__codelineno-20-7" name="__codelineno-20-7"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">initL</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-20-8" name="__codelineno-20-8"></a><span class="w">      </span><span class="nx">aaac</span><span class="p">();</span><span class="w"> </span><span class="nx">lastHeight</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">left</span><span class="p">.</span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">scrollHeight</span><span class="p">;</span>
<a id="__codelineno-20-9" name="__codelineno-20-9"></a><span class="w">      </span><span class="nx">setInterval</span><span class="p">(</span><span class="kd">function</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-20-10" name="__codelineno-20-10"></a><span class="w">        </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">left</span><span class="p">.</span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">scrollHeight</span><span class="w"> </span><span class="o">!=</span><span class="w"> </span><span class="nx">lastHeight</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-20-11" name="__codelineno-20-11"></a><span class="w">          </span><span class="nx">aaac</span><span class="p">();</span><span class="w"> </span><span class="nx">lastHeight</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">left</span><span class="p">.</span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">scrollHeight</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span>
<a id="__codelineno-20-12" name="__codelineno-20-12"></a><span class="w">        </span><span class="p">}</span>
<a id="__codelineno-20-13" name="__codelineno-20-13"></a><span class="w">      </span><span class="p">},</span><span class="w"> </span><span class="mf">1</span><span class="p">);</span>
<a id="__codelineno-20-14" name="__codelineno-20-14"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-20-15" name="__codelineno-20-15"></a><span class="w">    </span><span class="kd">function</span><span class="w"> </span><span class="nx">aaac</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-20-16" name="__codelineno-20-16"></a><span class="w">      </span><span class="nb">document</span><span class="p">.</span><span class="nx">all</span><span class="p">(</span><span class="s1">&#39;left&#39;</span><span class="p">).</span><span class="nx">height</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">left</span><span class="p">.</span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">scrollHeight</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span>
<a id="__codelineno-20-17" name="__codelineno-20-17"></a><span class="w">    </span><span class="p">}</span>
<a id="__codelineno-20-18" name="__codelineno-20-18"></a><span class="w">  </span><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<a id="__codelineno-20-19" name="__codelineno-20-19"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-20-20" name="__codelineno-20-20"></a>
<a id="__codelineno-20-21" name="__codelineno-20-21"></a><span class="p">&lt;</span><span class="nt">body</span> <span class="na">bgcolor</span><span class="o">=</span><span class="s">&quot;#E1FFE1&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-20-22" name="__codelineno-20-22"></a>  <span class="p">&lt;</span><span class="nt">center</span><span class="p">&gt;</span>
<a id="__codelineno-20-23" name="__codelineno-20-23"></a>    <span class="p">&lt;</span><span class="nt">iframe</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;html_img.html&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;aa&quot;</span> <span class="na">width</span><span class="o">=</span><span class="s">&quot;600&quot;</span> <span class="na">height</span><span class="o">=</span><span class="s">&quot;400&quot;</span> <span class="na">marginwidth</span><span class="o">=</span><span class="s">&quot;30&quot;</span> <span class="na">marginheight</span><span class="o">=</span><span class="s">&quot;20&quot;</span> <span class="na">align</span><span class="o">=</span><span class="s">&quot;middle&quot;</span>
<a id="__codelineno-20-24" name="__codelineno-20-24"></a>      <span class="na">allowtransparency</span><span class="o">=</span><span class="s">&quot;true&quot;</span> <span class="na">onload</span><span class="o">=</span><span class="s">&quot;initL()&quot;</span><span class="p">&gt;</span> 这是一个浮动窗口<span class="p">&lt;/</span><span class="nt">iframe</span><span class="p">&gt;</span>
<a id="__codelineno-20-25" name="__codelineno-20-25"></a>    <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;html_a_a.html&quot;</span> <span class="na">target</span><span class="o">=</span><span class="s">&quot;aa&quot;</span><span class="p">&gt;</span>超链接<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-20-26" name="__codelineno-20-26"></a>    <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;html_hn.html&quot;</span> <span class="na">target</span><span class="o">=</span><span class="s">&quot;aa&quot;</span><span class="p">&gt;</span>标题<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-20-27" name="__codelineno-20-27"></a>    <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;html_marquee.html&quot;</span> <span class="na">target</span><span class="o">=</span><span class="s">&quot;aa&quot;</span><span class="p">&gt;</span>滚动<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-20-28" name="__codelineno-20-28"></a>  <span class="p">&lt;/</span><span class="nt">center</span><span class="p">&gt;</span>
<a id="__codelineno-20-29" name="__codelineno-20-29"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-20-30" name="__codelineno-20-30"></a>
<a id="__codelineno-20-31" name="__codelineno-20-31"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
</li>
</ol>
<h3 id="_4">综合</h3>
<h4 id="_5">表单与表格</h4>
<p>本课程综合实验以<strong>学生选课系统</strong>为基础组织实验内容，后续实验中提到该系统中的表不再赘述，具体表结构如下：</p>
<p><strong>学生表结构</strong></p>
<table>
<thead>
<tr>
<th>字段</th>
<th>类型</th>
<th>约束</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>no</td>
<td>varchar(20)</td>
<td>primary key</td>
<td>学号</td>
</tr>
<tr>
<td>name</td>
<td>varchar(20)</td>
<td>not null</td>
<td>姓名</td>
</tr>
<tr>
<td>gender</td>
<td>varchar(2)</td>
<td></td>
<td>性别</td>
</tr>
<tr>
<td>age</td>
<td>int</td>
<td></td>
<td>年龄</td>
</tr>
<tr>
<td>dept</td>
<td>varchar(20)</td>
<td></td>
<td>所在系</td>
</tr>
</tbody>
</table>
<p><strong>课程表结构</strong></p>
<table>
<thead>
<tr>
<th>字段</th>
<th>类型</th>
<th>约束</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>no</td>
<td>varchar(20)</td>
<td>primary key</td>
<td>编号</td>
</tr>
<tr>
<td>name</td>
<td>varchar(200)</td>
<td>not null</td>
<td>课程名</td>
</tr>
<tr>
<td>PreNo</td>
<td>varchar(20)</td>
<td></td>
<td>先修课</td>
</tr>
<tr>
<td>credit</td>
<td>numeric(10,1)</td>
<td></td>
<td>学分</td>
</tr>
</tbody>
</table>
<blockquote>
<p>foreign key(PreNo) references Course(No)</p>
</blockquote>
<p><strong>学生选课表结构</strong></p>
<table>
<thead>
<tr>
<th>字段</th>
<th>类型</th>
<th>约束</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>CourseNo</td>
<td>varchar(20)</td>
<td></td>
<td>课程号</td>
</tr>
<tr>
<td>StuNo</td>
<td>varchar(20)</td>
<td></td>
<td>学号</td>
</tr>
<tr>
<td>Grade</td>
<td>numeric(10,1)</td>
<td></td>
<td>成绩</td>
</tr>
</tbody>
</table>
<blockquote>
<p>primary key(StuNo, CourseNo),foreign key(StuNo) references Student(No),foreign key(CourseNo) references Course(No)</p>
</blockquote>
<p>使用<strong>Html</strong>为<strong>学生表</strong>建立用于数据采集的表单界面和用于数据展示的表格界面，以下参考代码：</p>
<p><strong>表单界面-学生表</strong></p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">stu/student_form.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-21-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-21-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-21-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-21-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-21-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-21-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-21-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-21-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-21-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-21-10">10</a></span>
<span class="normal"><a href="#__codelineno-21-11">11</a></span>
<span class="normal"><a href="#__codelineno-21-12">12</a></span>
<span class="normal"><a href="#__codelineno-21-13">13</a></span>
<span class="normal"><a href="#__codelineno-21-14">14</a></span>
<span class="normal"><a href="#__codelineno-21-15">15</a></span>
<span class="normal"><a href="#__codelineno-21-16">16</a></span>
<span class="normal"><a href="#__codelineno-21-17">17</a></span>
<span class="normal"><a href="#__codelineno-21-18">18</a></span>
<span class="normal"><a href="#__codelineno-21-19">19</a></span>
<span class="normal"><a href="#__codelineno-21-20">20</a></span>
<span class="normal"><a href="#__codelineno-21-21">21</a></span>
<span class="normal"><a href="#__codelineno-21-22">22</a></span>
<span class="normal"><a href="#__codelineno-21-23">23</a></span>
<span class="normal"><a href="#__codelineno-21-24">24</a></span>
<span class="normal"><a href="#__codelineno-21-25">25</a></span>
<span class="normal"><a href="#__codelineno-21-26">26</a></span>
<span class="normal"><a href="#__codelineno-21-27">27</a></span>
<span class="normal"><a href="#__codelineno-21-28">28</a></span>
<span class="normal"><a href="#__codelineno-21-29">29</a></span>
<span class="normal"><a href="#__codelineno-21-30">30</a></span>
<span class="normal"><a href="#__codelineno-21-31">31</a></span>
<span class="normal"><a href="#__codelineno-21-32">32</a></span>
<span class="normal"><a href="#__codelineno-21-33">33</a></span>
<span class="normal"><a href="#__codelineno-21-34">34</a></span>
<span class="normal"><a href="#__codelineno-21-35">35</a></span>
<span class="normal"><a href="#__codelineno-21-36">36</a></span>
<span class="normal"><a href="#__codelineno-21-37">37</a></span>
<span class="normal"><a href="#__codelineno-21-38">38</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-21-1" name="__codelineno-21-1"></a><span class="cp">&lt;!DOCTYPE html&gt;</span>
<a id="__codelineno-21-2" name="__codelineno-21-2"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<a id="__codelineno-21-3" name="__codelineno-21-3"></a>
<a id="__codelineno-21-4" name="__codelineno-21-4"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-21-5" name="__codelineno-21-5"></a>  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;utf-8&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-21-6" name="__codelineno-21-6"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>学生表<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<a id="__codelineno-21-7" name="__codelineno-21-7"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-21-8" name="__codelineno-21-8"></a>
<a id="__codelineno-21-9" name="__codelineno-21-9"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-21-10" name="__codelineno-21-10"></a>  <span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;</span>学生表<span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span>
<a id="__codelineno-21-11" name="__codelineno-21-11"></a>  <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-21-12" name="__codelineno-21-12"></a>    <span class="p">&lt;</span><span class="nt">form</span> <span class="na">action</span><span class="o">=</span><span class="s">&quot;#&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-21-13" name="__codelineno-21-13"></a>      <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-21-14" name="__codelineno-21-14"></a>        <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&quot;no&quot;</span><span class="p">&gt;</span>学号:<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
<a id="__codelineno-21-15" name="__codelineno-21-15"></a>        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;no&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;no&quot;</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">&quot;请输入学号..&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-21-16" name="__codelineno-21-16"></a>      <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-21-17" name="__codelineno-21-17"></a>      <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-21-18" name="__codelineno-21-18"></a>        <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&quot;name&quot;</span><span class="p">&gt;</span>姓名:<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
<a id="__codelineno-21-19" name="__codelineno-21-19"></a>        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;name&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;name&quot;</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">&quot;请输入姓名..&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-21-20" name="__codelineno-21-20"></a>      <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-21-21" name="__codelineno-21-21"></a>      <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-21-22" name="__codelineno-21-22"></a>        <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&quot;gender&quot;</span><span class="p">&gt;</span>性别:<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
<a id="__codelineno-21-23" name="__codelineno-21-23"></a>        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;gender&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;gender&quot;</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">&quot;请输入性别..&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-21-24" name="__codelineno-21-24"></a>      <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-21-25" name="__codelineno-21-25"></a>      <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-21-26" name="__codelineno-21-26"></a>        <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&quot;age&quot;</span><span class="p">&gt;</span>年龄:<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
<a id="__codelineno-21-27" name="__codelineno-21-27"></a>        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;number&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;age&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;age&quot;</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">&quot;请输入年龄..&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-21-28" name="__codelineno-21-28"></a>      <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-21-29" name="__codelineno-21-29"></a>      <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-21-30" name="__codelineno-21-30"></a>        <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&quot;dept&quot;</span><span class="p">&gt;</span>所在系:<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
<a id="__codelineno-21-31" name="__codelineno-21-31"></a>        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;dept&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;dept&quot;</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">&quot;请输入所在系..&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-21-32" name="__codelineno-21-32"></a>      <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-21-33" name="__codelineno-21-33"></a>      <span class="p">&lt;</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;submit&quot;</span><span class="p">&gt;</span>提交<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
<a id="__codelineno-21-34" name="__codelineno-21-34"></a>    <span class="p">&lt;/</span><span class="nt">form</span><span class="p">&gt;</span>
<a id="__codelineno-21-35" name="__codelineno-21-35"></a>  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-21-36" name="__codelineno-21-36"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-21-37" name="__codelineno-21-37"></a>
<a id="__codelineno-21-38" name="__codelineno-21-38"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<p><strong>表格界面-学生表</strong></p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">stu/student_table.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-22-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-22-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-22-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-22-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-22-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-22-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-22-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-22-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-22-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-22-10">10</a></span>
<span class="normal"><a href="#__codelineno-22-11">11</a></span>
<span class="normal"><a href="#__codelineno-22-12">12</a></span>
<span class="normal"><a href="#__codelineno-22-13">13</a></span>
<span class="normal"><a href="#__codelineno-22-14">14</a></span>
<span class="normal"><a href="#__codelineno-22-15">15</a></span>
<span class="normal"><a href="#__codelineno-22-16">16</a></span>
<span class="normal"><a href="#__codelineno-22-17">17</a></span>
<span class="normal"><a href="#__codelineno-22-18">18</a></span>
<span class="normal"><a href="#__codelineno-22-19">19</a></span>
<span class="normal"><a href="#__codelineno-22-20">20</a></span>
<span class="normal"><a href="#__codelineno-22-21">21</a></span>
<span class="normal"><a href="#__codelineno-22-22">22</a></span>
<span class="normal"><a href="#__codelineno-22-23">23</a></span>
<span class="normal"><a href="#__codelineno-22-24">24</a></span>
<span class="normal"><a href="#__codelineno-22-25">25</a></span>
<span class="normal"><a href="#__codelineno-22-26">26</a></span>
<span class="normal"><a href="#__codelineno-22-27">27</a></span>
<span class="normal"><a href="#__codelineno-22-28">28</a></span>
<span class="normal"><a href="#__codelineno-22-29">29</a></span>
<span class="normal"><a href="#__codelineno-22-30">30</a></span>
<span class="normal"><a href="#__codelineno-22-31">31</a></span>
<span class="normal"><a href="#__codelineno-22-32">32</a></span>
<span class="normal"><a href="#__codelineno-22-33">33</a></span>
<span class="normal"><a href="#__codelineno-22-34">34</a></span>
<span class="normal"><a href="#__codelineno-22-35">35</a></span>
<span class="normal"><a href="#__codelineno-22-36">36</a></span>
<span class="normal"><a href="#__codelineno-22-37">37</a></span>
<span class="normal"><a href="#__codelineno-22-38">38</a></span>
<span class="normal"><a href="#__codelineno-22-39">39</a></span>
<span class="normal"><a href="#__codelineno-22-40">40</a></span>
<span class="normal"><a href="#__codelineno-22-41">41</a></span>
<span class="normal"><a href="#__codelineno-22-42">42</a></span>
<span class="normal"><a href="#__codelineno-22-43">43</a></span>
<span class="normal"><a href="#__codelineno-22-44">44</a></span>
<span class="normal"><a href="#__codelineno-22-45">45</a></span>
<span class="normal"><a href="#__codelineno-22-46">46</a></span>
<span class="normal"><a href="#__codelineno-22-47">47</a></span>
<span class="normal"><a href="#__codelineno-22-48">48</a></span>
<span class="normal"><a href="#__codelineno-22-49">49</a></span>
<span class="normal"><a href="#__codelineno-22-50">50</a></span>
<span class="normal"><a href="#__codelineno-22-51">51</a></span>
<span class="normal"><a href="#__codelineno-22-52">52</a></span>
<span class="normal"><a href="#__codelineno-22-53">53</a></span>
<span class="normal"><a href="#__codelineno-22-54">54</a></span>
<span class="normal"><a href="#__codelineno-22-55">55</a></span>
<span class="normal"><a href="#__codelineno-22-56">56</a></span>
<span class="normal"><a href="#__codelineno-22-57">57</a></span>
<span class="normal"><a href="#__codelineno-22-58">58</a></span>
<span class="normal"><a href="#__codelineno-22-59">59</a></span>
<span class="normal"><a href="#__codelineno-22-60">60</a></span>
<span class="normal"><a href="#__codelineno-22-61">61</a></span>
<span class="normal"><a href="#__codelineno-22-62">62</a></span>
<span class="normal"><a href="#__codelineno-22-63">63</a></span>
<span class="normal"><a href="#__codelineno-22-64">64</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-22-1" name="__codelineno-22-1"></a><span class="cp">&lt;!DOCTYPE html&gt;</span>
<a id="__codelineno-22-2" name="__codelineno-22-2"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<a id="__codelineno-22-3" name="__codelineno-22-3"></a>
<a id="__codelineno-22-4" name="__codelineno-22-4"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-22-5" name="__codelineno-22-5"></a>  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;utf-8&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-22-6" name="__codelineno-22-6"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>学生表<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<a id="__codelineno-22-7" name="__codelineno-22-7"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-22-8" name="__codelineno-22-8"></a>
<a id="__codelineno-22-9" name="__codelineno-22-9"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-22-10" name="__codelineno-22-10"></a>  <span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;</span>学生表<span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span>
<a id="__codelineno-22-11" name="__codelineno-22-11"></a>  <span class="p">&lt;</span><span class="nt">table</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;STUDENT&quot;</span> <span class="na">border</span><span class="o">=</span><span class="s">&quot;1&quot;</span> <span class="na">width</span><span class="o">=</span><span class="s">&quot;100%&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-22-12" name="__codelineno-22-12"></a>    <span class="p">&lt;</span><span class="nt">thead</span><span class="p">&gt;</span>
<a id="__codelineno-22-13" name="__codelineno-22-13"></a>      <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>
<a id="__codelineno-22-14" name="__codelineno-22-14"></a>        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-22-15" name="__codelineno-22-15"></a>      <span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
<a id="__codelineno-22-16" name="__codelineno-22-16"></a>      <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>学号<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
<a id="__codelineno-22-17" name="__codelineno-22-17"></a>      <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>姓名<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
<a id="__codelineno-22-18" name="__codelineno-22-18"></a>      <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>性别<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
<a id="__codelineno-22-19" name="__codelineno-22-19"></a>      <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>年龄<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
<a id="__codelineno-22-20" name="__codelineno-22-20"></a>      <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>所在系<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
<a id="__codelineno-22-21" name="__codelineno-22-21"></a>      <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>操作<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
<a id="__codelineno-22-22" name="__codelineno-22-22"></a>    <span class="p">&lt;/</span><span class="nt">thead</span><span class="p">&gt;</span>
<a id="__codelineno-22-23" name="__codelineno-22-23"></a>    <span class="p">&lt;</span><span class="nt">tbody</span><span class="p">&gt;</span>
<a id="__codelineno-22-24" name="__codelineno-22-24"></a>      <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
<a id="__codelineno-22-25" name="__codelineno-22-25"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-22-26" name="__codelineno-22-26"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>200215121<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-22-27" name="__codelineno-22-27"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>李勇<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-22-28" name="__codelineno-22-28"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>男<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-22-29" name="__codelineno-22-29"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>20<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-22-30" name="__codelineno-22-30"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>CS<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-22-31" name="__codelineno-22-31"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;javascript:void()&quot;</span><span class="p">&gt;</span>修改<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-22-32" name="__codelineno-22-32"></a>      <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
<a id="__codelineno-22-33" name="__codelineno-22-33"></a>      <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
<a id="__codelineno-22-34" name="__codelineno-22-34"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-22-35" name="__codelineno-22-35"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>200215122<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-22-36" name="__codelineno-22-36"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>刘晨<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-22-37" name="__codelineno-22-37"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>女<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-22-38" name="__codelineno-22-38"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>19<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-22-39" name="__codelineno-22-39"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>CS<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-22-40" name="__codelineno-22-40"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;javascript:void()&quot;</span><span class="p">&gt;</span>修改<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-22-41" name="__codelineno-22-41"></a>      <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
<a id="__codelineno-22-42" name="__codelineno-22-42"></a>      <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
<a id="__codelineno-22-43" name="__codelineno-22-43"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-22-44" name="__codelineno-22-44"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>200215123<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-22-45" name="__codelineno-22-45"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>王敏<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-22-46" name="__codelineno-22-46"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>女<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-22-47" name="__codelineno-22-47"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>18<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-22-48" name="__codelineno-22-48"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>MA<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-22-49" name="__codelineno-22-49"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;javascript:void()&quot;</span><span class="p">&gt;</span>修改<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-22-50" name="__codelineno-22-50"></a>      <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
<a id="__codelineno-22-51" name="__codelineno-22-51"></a>      <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
<a id="__codelineno-22-52" name="__codelineno-22-52"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-22-53" name="__codelineno-22-53"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>200515125<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-22-54" name="__codelineno-22-54"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>张立<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-22-55" name="__codelineno-22-55"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>男<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-22-56" name="__codelineno-22-56"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>19<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-22-57" name="__codelineno-22-57"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>IS<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-22-58" name="__codelineno-22-58"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;javascript:void()&quot;</span><span class="p">&gt;</span>修改<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-22-59" name="__codelineno-22-59"></a>      <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
<a id="__codelineno-22-60" name="__codelineno-22-60"></a>    <span class="p">&lt;/</span><span class="nt">tbody</span><span class="p">&gt;</span>
<a id="__codelineno-22-61" name="__codelineno-22-61"></a>  <span class="p">&lt;/</span><span class="nt">table</span><span class="p">&gt;</span>
<a id="__codelineno-22-62" name="__codelineno-22-62"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-22-63" name="__codelineno-22-63"></a>
<a id="__codelineno-22-64" name="__codelineno-22-64"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<h3 id="_6">拓展练习</h3>
<ol>
<li>
<p>修改实验中页面背景颜色等属性，体会标签与属性的作用</p>
</li>
<li>
<p>为课程表建立表单界面和表格界面，可参考学生表</p>
</li>
</ol>












                
              </article>
            </div>
          
          
  <script>var tabs=__md_get("__tabs");if(Array.isArray(tabs))e:for(var set of document.querySelectorAll(".tabbed-set")){var labels=set.querySelector(".tabbed-labels");for(var tab of tabs)for(var label of labels.getElementsByTagName("label"))if(label.innerText.trim()===tab){var input=document.getElementById(label.htmlFor);input.checked=!0;continue e}}</script>

<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
        </div>
        
      </main>
      
        <footer class="md-footer">
  
  <div class="md-footer-meta md-typeset">
    <div class="md-footer-meta__inner md-grid">
      <div class="md-copyright">
  
  
    Made with
    <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
      Material for MkDocs
    </a>
  
</div>
      
    </div>
  </div>
</footer>
      
    </div>
    <div class="md-dialog" data-md-component="dialog">
      <div class="md-dialog__inner md-typeset"></div>
    </div>
    
    
    <script id="__config" type="application/json">{"base": "..", "features": ["content.code.copy", "content.tabs.link", "navigation.expand", "navigation.sections", "navigation.path"], "search": "../assets/javascripts/workers/search.f8cc74c7.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script>
    
    
      <script src="../assets/javascripts/bundle.f1b6f286.min.js"></script>
      
    
  </body>
</html>